css - 从 id 或 class 定义悬停样式

Question

如果我有类似的东西

<a id="link-id">...</a>

或

<a class="link-class">...</a>

如何使用 link-id 或 link-class 设置悬停行为？我试过 link-id:hover 和 link-class:hover 但它不起作用。

Answer 1

使用 hover像这样的伪类:

#link-id{
    height:300px;
    width:300px;
    font-size:20px;
    background:red;
    display:block;
    transition:0.5s ease;
}

#link-id:hover{    /*or .link-class if targeting by class*/
    font-size:30px;
    background:blue;
    cursor:poitner;
    text-align:center;
}

Demo