Question

美好的一天。

我有一个元素，分配了两个三个类。在html中分配了两个，并且jQuery将其中一个分配为活动类。

现在我想在CSS中指定悬停效果，但是要指定一个特定元素：“menuItem first”类...

HTML：

<ul>     
  <li class="menuItem first"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
</ul>

CSS：

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(img/active_bg2.png) no-repeat;
}

li.act .first, li.act .first:hover{
    /* The active state of the thumb - first class only! */
    background:url(img/active_bg1.png) no-repeat;
}

我知道上面的CSS是错误的。什么是正确的注释？
请记住，.act类由jQuery分配给活动元素...

Answer 1

当你说

时

li.act .first

你真正说的是“first元素中带有类<li>的元素act”。

如果你想说“同时包含first和act类的元素，你需要写出没有空格的元素：

li.act.first

在此之后，为了实现所述选择器的悬停规则集，您可以像往常一样附加伪:hover：

li.act.first:hover

Answer 2

你的选择器中有一个额外的空间

使用

li.act.first, li.act.first:hover{
    /* The active state of the thumb - first class only! */
    background:url(img/active_bg1.png) no-repeat;
}

选择器li.act.first表示li元素在类属性中同时包含act和first。

Answer 3

您目前所拥有的是为两种状态设置相同的背景颜色。相反，你会使用,,

.first{background-color:#faa;}
.first:hover{background-color:#afa;}

我在这里使用背景色作为一个工作示例， http://jsfiddle.net/mshtT/

Answer 4

当您在HTML中的第一个li class="menuItem first元素中编写li时，menuItem和first会成为两个独立的类。要将悬停效果应用于一个元素，您只需使用以下CSS

即可

.first:hover {
    /*the effect you want*/ (eg. Background: #444;)
}

它只适用于其中包含first类的元素，这是您的第一个元素。

在样式表中指定多css类

4 个答案: