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 {
    ...
}

Answer 2

我设法解决了我的具体问题，但感谢其他人的尝试。

我必须使用兄弟和后代选择器的组合。

我将psuedo :hover应用于图片周围的锚点，然后选择名为.itemTitle的下一个兄弟，然后选择.itemTitle的后代.itemTitleLink。

.itemImageLink:hover ~ .itemTitle > .itemTitleLink {color:#CD3333;text-decoration:underline;}

<a href="#" class="itemImageLink">
<div class="itemTitle"><!-- sibling of .itemImageLink -->
    <a href="#" class="itemTitleLink">Link</a><!-- descendant of .itemTitle -->
</div>

我可以使用CSS：悬停以影响其他元素属性吗？

2 个答案: