Question

我遇到了一个奇怪的CSS问题。

这可能是因为我不直接使用类，而是使用标签名称，但我想知道问题是什么，所以我不再重复了。

我的HTML是这样的：

<div class='container'>
    <div class='top'>
        <a href='href.com'>hover here..</a>
    </div>
    <div class='bottom'>
        <a>..and this should change</a>
    </div>
</div>

以及我尝试使用CSS：

.top a:hover .bottom a
{
    color:#f00; /* does not work */
}
.top a:hover .container
{
    background-color:#f00; /* does not work */
}
.top a:hover
{
    color:#f00; /* works */
}

那么为什么对其他元素的调用不起作用？

或者是因为我从孩子那里打电话给父母？

如果是这样，我怎样才能让它发挥作用？

谢谢！

Answer 1

晚了一年，但对于那些偶然发现的人，请使用以下作为css：

.top:hover ~ .bottom {color: red;}

http://jsfiddle.net/Xb62A/

Answer 2

你的css错了，你忘记了逗号：

.top a:hover, .bottom a:hover
{
    color:#f00;
}
.top a:hover, .container:hover /* Comma was missing here */
{
    background-color:#f00;
}

CSS悬停选择器不起作用

2 个答案: