Question

我有一个列表元素，里面有两个标签，锚标签和span标签。我想要实现的是当悬停在锚标签上时，实际的背景将变为黑色，因为span标记的背景将变为绿色。

CSS3可以实现，还是需要使用JavaScript？我不会在这里粘贴任何代码，因为它非常简单。

提前致谢！

到目前为止这是CSS：

#left_control_links li a {

    font-family: 'Open Sans', sans-serif;
    font-size: 14px; padding: 15px 15px 15px 20px;
    font-weight: 600; float: left; width: 83%;
    color: #dfdfdf; text-decoration: none;
}
#left_control_links li a:hover {

    background: #272727;

}
span.list_total_count {

    display: inline-block; background-color: #2c2c2c; float:right; min-width: 31px;
    color: #fcfcfc ;padding: 5px 0 5px 8px;
    font-family: Verdana; font-size: 13px; position: relative; top: 0px; left: 15px;
}

HTML：

<ul id="left_control_links">
    <li>
    <a href="subjects">Subjects
    <span class="list_total_count"><?=$total_subjects?></span>
    </a></li>
    <li>
    <a href="staff_users">Users
    <span class="list_total_count"><?=$total_users?></span>
    </a></li>
    <li><a href="#">Kyselyiden seuranta</a></li>

</ul>

Answer 1

不确定看这个例子： http://jsfiddle.net/gWXhJ/

添加父:hover并应用css添加他们的孩子

<li>
    <a href="#text">this is link</a>
    <span>Text test</span>
</li>

Answer 2

对于有问题的代码，CSS可以在鼠标上更改跨度背景颜色：

#left_control_links li a:hover span.list_total_count {
    background: none #aaa;
}

我发布这个，因为CSS特异性可能在类似的例子中有主要规则。非常好的文章：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

CSS - 悬停影响具有两种不同背景颜色的两个元素

2 个答案: