html - 悬停另一个元素的问题

Question

我正在尝试影响:

Hover the image > change the link below's color

但我无法让它正常工作。如果我将整个第一个容器 .clearfix 作为目标，我只能使这种效果起作用，但是我怎样才能使它以一种只有当我将鼠标悬停在 img 而不是整个 .clearfix 元素，会改变链接的颜色吗？

.clearfix:hover > b a {
    color:red;
}

<li class="clearfix">
    <div class="zitem"><a href="#"><img class="recent_thumb" src="http://lorempixel.com/270/142/sports"/></a></div>
    <b><a href="#">Random Title text</a></b>
<br>
</li>

我也试过这些:

.clearfix:hover + b a { ... }
.clearfix:hover ~ b a { ... }

但它似乎没有工作或做任何事情......也许我做错了。

Answer 1

试试这个

.zitem:hover + b a {
    color:red;
}

div与 zitem类和 <b>元素是同级元素，因此同级选择器(相邻的 + 或一般的 ~)将在这些元素上起作用。