2

将鼠标悬停在相应的图像上时，我试图更改文本链接属性（不同的颜色和文本装饰：下划线；）。

这是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 在网页上被多次使用。

谢谢

4

2 回答 2

7

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

在这种情况下，你不能真正做到这一点，itemImage因为它涉及回溯 DOM，但你可以做到这一点itemImageLink，例如：

.itemImageLink:hover ~ .itemTitle {
    ...
}
于 2013-04-06T01:02:59.990 回答
0

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

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

我将 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>
于 2013-04-06T01:39:51.627 回答