我可以使用CSS:悬停以实现另一个元素属性吗？

Question

我将鼠标悬停在相应的图像上时,尝试更改文本链接属性(不同的颜色和文本修饰:下划线;).

这是html:

<!-- Wraps image, title, category -->
                <div class="itemWrap">
                    <!-- Item Image -->
                    <a href="#" class="itemImageLink"><img class="itemImage" src="img/thumb.png" alt="thumb"></a>
                    <!-- Item Title -->
                    <div class="itemTitle">
                        <a href="#">The original soul of Michael Jackson</a>
                    </div>
                    <!-- Item Category -->
                    <div class="itemCat">
                        <a href="#">12" Picture Disc</a>
                    </div>
                </div><!-- close itemWrap -->

是否有可能将鼠标悬停在itemImage(包含在锚点中)上,可以更改.itemTitle中链接的属性？

值得注意的是,在网页上多次使用itemWrap.

谢谢

Answer 1

您可以:hover在复合选择器中的任何位置使用,因此如果您可以在包含时选择要更改的元素,则为:hover是.

在这种情况下,您无法真正实现它,itemImage因为它涉及回溯DOM,但您可以使用itemImageLink,例如:

.itemImageLink:hover ~ .itemTitle {
    ...
}