Question

我有两个预定义的类（class-normal和class-on-select）。一些li元素正在使用class-normal。如何让它们仅在焦点/悬停时使用class-on-select？

Answer 1

您可以在同一个班级上使用:hover, :focus来实现这些效果：

HTML：

<ul>
    <li>Random li</li>
</ul>

CSS：

ul li {
    color:black;
    background:#BFBFBF;
    border:1px solid #000;
    /*css for class-normal*/
}
ul li:hover {
    color:#fff;
    background:#000;
    border:1px solid #000;
    /*css for class-on-select*/
}

演示：http://jsfiddle.net/GCu2D/600/

Answer 2

class-normal:hover , class-normal:focus{ 
   //your styling here
}

会做到这一点。

Answer 3

您可以尝试这样的事情：

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

<p><b><a href="https://www.google.com" target="_blank">Google</a></b></p>
    <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
    <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

JSFiddle Demo

在焦点上切换两种样式

3 个答案: