css - 我可以使用 CSS :hover to effect another elements properties?

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(包含在 anchor 中)上时可以更改 .itemTitle 中的链接属性？

可能值得注意的是，itemWrap 在网页上被多次使用。

谢谢

Answer 1

您可以在复合选择器中的任何地方使用 :hover，因此如果您可以在包含 :hover 的同时选择要更改的元素，那么可以。

在这种情况下，您不能真正使用 itemImage 来完成它，因为它涉及回溯 DOM，但您可以使用 itemImageLink 来完成，例如:

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