我可以使用CSS：悬停来实现其他元素属性吗？

我试图改变一个文本链接属性（不同的颜色和文字修饰：下划线;）时悬停在其对应的图像。我可以使用CSS：悬停来实现其他元素属性吗？

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

感谢

来源

2013-04-06 crm

你可以在一个复合选择使用:hover任何地方，所以如果你可以选择你想要同时包括:hover，然后是更改的元素。

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

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

来源

2013-04-06 01:02:59 Jim

谢谢，我试过这种方法不起作用。我试图改变.itemTitle类中的链接的属性，这会使它成为.itemTitle的子元素（？）元素，这可能吗？ – crm 2013-04-06 01:08:14

我使用兄弟和后代选择器的组合解决了这个问题。 – crm 2013-04-06 01:45:45

@crm上述答案正确回答了您的原始问题...您解决的问题涉及[css特异性]（http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should -知道/）。 – thgaskell 2013-04-06 01:51:23

我设法解决我的具体的问题，但感谢其他人的企图。

我不得不使用兄弟和后裔选择器的组合。

我将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-06 01:39:51 crm

是的，当用户将鼠标悬停在IMAGE上时，你解决了问题（实际上是'itemImageLink'类），但是当悬停在'itemImage'类上时没有问题。换句话说 - 这解决了你的问题，但这不能解决你的问题。 – 2013-04-06 01:56:35

我可以使用CSS：悬停来实现其他元素属性吗？

回答

相关问题