CSS ::悬停在元素上并定位另一个元素

Question

我们认为我们有以下代码：

<div class="post wrapper">
    <div class="post title">
        <h3>Title</h3>
    </div>
    <div class="post thumb"> // This has the post thumb set as background image
        <div class="post overlay"></div>
    </div>
</div>

使用一些额外的CSS会导致：

如果我想在用户使用鼠标时获得一个很好的效果我可以做的图像;

div.post.overlay:hover {
    background-color: rgba(0,0,0,0.2);
}

现在，如果用户将鼠标放在:hover文字/白框上，Title效果将无效。为了解决这个问题，请使用：

div.post.wrapper:hover div.post.overlay { // => note where :hover is
    background-color: rgba(0,0,0,0.2);
}

这是有效的CSS吗？它是否可以跨浏览器使用？是否可以在:hover上调用wrapper，然后在background-color上设置overlay。它似乎适用于谷歌浏览器和Safari。

谢谢。

Answer 1

完全没问题。只要<div class="collapse navbar-collapse navbar-right" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#home" class="navbar2" style="padding:0px 10px 0px 10px;">Home</a></li> <li class=""><a href="service.html#service" style="padding:0px 10px 0px 10px;">Services</a></li> <li class=""><a href="#about" class="navbar2" style="padding:0px 10px 0px 10px;">About</a></li> <li class=""><a href="contact.html#contact" style="padding:0px 10px 0px 10px;">Contact</a></li> </ul> </div> 位于div.post.overlay内，当您将鼠标悬停在div.post.wrapper上时，div.post.wrapper就会应用这些样式。这在所有浏览器中都有效，并且它是正常的后代选择器。