我可以使用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：懸停來實現其他元素屬性嗎？

回答

相關問題