2

再会。

我有一个分配了两个三个类的元素。两个在 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 分配给活动元素的...

4

4 回答 4

5

当你说

li.act .first

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

如果你想说“同时具有first和act类的元素，你会想把它们写成不带空格的：

li.act.first

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

li.act.first:hover
于 2013-02-25T06:12:37.933 回答
3

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

利用

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在类属性中。

于 2013-02-25T06:11:57.880 回答
0

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

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

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

于 2013-02-25T06:31:06.187 回答
0

When you write li class="menuItem first like the way you did in your first li element in HTML, menuItem and first become two separate classes. To apply the hover effect in just one element you can just use the following CSS 

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

It would only apply to the element that has the first class in it, that is your first element.

于 2013-02-25T07:12:35.097 回答