CSS孩子選擇不工作

我有以下的HTML代碼：CSS孩子選擇不工作

<div class="resultimage"> 
    <a href="www.site.com"> 
     <img class="resultpic" src="images/image.jpg"> 
     <img class="resultview" src="images/view.png"> 
    </a> 
</div>

和下面的CSS：

.resultimage:hover > .resultpic { 
opacity: 0.7; 
}

這似乎並沒有工作。該頁面將包含該確切代碼塊的多個實例（我不確定是否重要）。我可能會想到這一切都是錯誤的，但我試圖實現的是這樣的：每當您將鼠標懸停在第一張圖片上時，第二張圖片就會出現在第一張圖片上方，並且第一張圖片的不透明度會降低。什麼是實現這一目標的最佳方式？（默認情況下第二個圖像設置爲「display：none;」）

來源

2013-12-21 user2588317

'>'選擇器查詢子後代。嘗試

.resultimage:hover .resultpic { 
    opacity: 0.7; 
}

來源

2013-12-21 07:38:07 Jim

燁。工作！它很有趣，你花了那麼多的時間試圖讓某些東西工作，你跳過明顯的（我最初試圖用jQuery來做這件事） – user2588317

或者你可以使用'.resultimage：hover> a> .resultpic' –

>是立竿見影的孩子選擇

但<img class="resultview" src="images/view.png">不是<div class="resultimage">但後代的直接後代。因此，正確的語法是

.resultimage:hover .resultpic { 
    opacity: 0.7; 
}

來源

2013-12-21 07:43:34

添加：將鼠標懸停在您選擇的特定元素上。它更有意義爲：

.resultimage .resultpic:hover{ 
    opacity:0.7; 
}

看到的jsfiddle http://jsfiddle.net/dwX99/

來源

2013-12-21 07:48:55 unekwu

演示試試這個：

.resultimage:hover img.resultpic { 
    opacity: 0.7; 
}

來源

2013-12-21 07:54:35

CSS孩子選擇不工作

回答

相關問題