影響div：懸停與另一個div

我正在做一個畫廊，當你將鼠標懸停在主圖像上時，縮略圖應該變得透明。我想用純CSS實現這一點，但我不確定這是否可能。影響div：懸停與另一個div

CSS：

/* should affect thumbs but not main */ 
/* obviously this code wouldn't work */ 
#main:hover, #thumbs { 
    opacity: .5; 
}

HTML：

<div id="main"> 
    Hover over me to change #thumbs 
</div> 
<div id="thumbs"> 
    I change when you hover over #main 
</div>

這可能使用純CSS？

來源

2011-08-15 JacobTheDev

當然，僅僅使用相鄰兄弟選擇：

#div1:hover + #div2 { 
    ... 
}

這裏的一個例子：http://jsfiddle.net/6BfR6/94/

來源

2011-08-15 19:31:29 Nightfirecat

+1驚人......甚至不知道這個存在！ http://meyerweb.com/eric/articles/webrev/200007a.html – samccone

哇！謝謝！這絕對是完美的！就像上面的那個人一樣，我不知道這個存在。完善。 – JacobTheDev

+1我不知道你可以做到這一點沒有Javascript。 –

-1

即使它是，它不會在IE瀏覽器:)

我會用onmouseover事件表明

但它是很好的問題，我很好奇，如果有人這樣做跨瀏覽器的解決方案通過css

來源

2011-08-15 19:31:03 mkk

它不需要在IE中工作，我已經知道如何寫回退，但我不認爲我會打擾這一點。它更像是一個個人網站。 – JacobTheDev

@rev：參見Nightfirecat提供的解決方案。這是驚人的，它在IE 7和8的工作 - 我已經測試 – mkk

你可以用CSS來做到這一點。看到我的[純CSS信號欄評級小部件答案]（http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900），這表明您可以改變甚至（看起來）在DOM *之前顯示的元素的樣式。 –

只有選擇器的孩子可能會受到影響。否則，你需要使用JavaScript。

例如：

div:hover #childDiv { 
    background: green; 
}

來源

2011-08-15 19:31:14 Trevor

-1

我想你會需要一些JavaScript爲。

來源

2011-08-15 19:31:17

你可以單獨使用CSS來做到這一點。看到我的[純CSS信號欄評級小部件答案]（http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900），這表明您可以改變甚至（看起來）在DOM *之前顯示的元素的樣式。 –

認真嗎？ 4年後下調？ –

現在和現在一樣錯了。我昨天偶然發現了答案。我不是可以在發佈時閱讀答案的版主;只是一個隨機用戶，他們從網絡搜索到達這裏。 –

-1

不可以。您必須使用Javascript。

來源

2011-08-15 19:31:18

＃DIV1：懸停+＃{DIV2 ... }

它在IE 7,8,9和10中工作正常。不需要任何JS或onovermouse和不僅選擇器的孩子可能會受到影響。

嘗試「Nightfirecat」的示例鏈接。

來源

2013-03-10 12:44:38 dsgsd

影響div：懸停與另一個div

回答

相關問題