CSS：懸停一個元素，影響多個元素？

我正在尋找我懸停問題的方法。CSS：懸停一個元素，影響多個元素？

<div class="section"> 

<div class="image"><img src="myImage.jpg" /></div> 

<div class="layer">Lorem Ipsum</div> 

</div>

現在，這兩個類（圖像和圖層）都有邊框，它們都具有不同的顏色，用於常規和懸停。有沒有辦法讓我如果懸停圖層類，層和圖像類懸停邊框顏色是活動？反之亦然？

來源

2009-09-22 Marko

160

您不需要此JavaScript的JavaScript。

一些CSS會這樣做。這裏有一個例子：

<html> 
 
    <style type="text/css"> 
 
    .section { background:#ccc; } 
 
    .layer { background:#ddd; } 
 
    .section:hover img { border:2px solid #333; } 
 
    .section:hover .layer { border:2px solid #F90; } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="section"> 
 
    <img src="myImage.jpg" /> 
 
    <div class="layer">Lorem Ipsum</div> 
 
    </div> 
 
</body> 
 
</html>

來源

2009-09-22 20:58:17 corymathews

+10

奧基，這裏的贏家！ :)我不知道，如果我有東西：盤旋，我可以繼續那個白色的另一個元素！（somthing：hover。second）.. 每天你都會學到一些新東西......謝謝x10 – Marko 2009-09-23 08:28:24

我也不知道這個。謝謝你的幫助。 – fadedbee 2010-10-28 13:34:41

如果兩個div（懸停的和展示的）不在同一個直接父級div中，該怎麼辦？ – bikashg 2011-10-16 19:07:00

我想你需要用JavaScript來完成這個任務。

的jQuery：

$(function(){ 
    $("#innerContainer").hover(
     function(){ 
      $("#innerContainer").css('border-color','#FFF'); 
      $("#outerContainer").css('border-color','#FFF'); 
     }, 
     function(){ 
      $("#innerContainer").css('border-color','#000'); 
      $("#outerContainer").css('border-color','#000'); 
     } 
    ); 
});

調整值和元素的ID相應:)

來源

2009-09-22 20:26:36 inkedmn

不錯，真好！如果我有多個相同類名的部分呢？現在我已經嘗試了四個白色相同的類名，當我徘徊一個，那些都改變了？我應該讓跑步號碼前面的所有部分？ jquery是否有通配符支持anykind？（okey，我試試google吧！））謝謝.. – Marko 2009-09-22 21:07:45

這並不難實現，但你需要使用JavaScript onmouseover功能。僞文字：

 
<div class="section "> 

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div> 

<div class="layer">Lorem Ipsum</div> 

</div>

使用自己的顏色。您也可以在mouseover命令中引用javascript函數。

來源

2009-09-22 20:30:32 eykanal

對於使用class CSS改變而不是元素1作爲另一個例子。 – DVK 2009-09-22 20:36:05

這也工作，謝謝！我只是儘量避免內聯編碼。;） – Marko 2009-09-22 21:10:49

:)是的，這就是當我輸入快速'骯髒的代碼時得到的。 – eykanal 2009-09-24 16:25:03

這在Firefox和Chrome和IE8的工作對我來說...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
     div.section:hover div.image, div.section:hover div.layer { 
      border: solid 1px red; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="section"> 
      <div class="image"><img src="myImage.jpg" /></div> 
      <div class="layer">Lorem Ipsum</div> 
     </div> 
    </body> 
</html>

...您可能需要使用IE6來測試這個問題，以及（我不知道它是否會在那裏工作）。

來源

2009-09-22 20:38:25

事實上，它似乎可以在IE8中工作。添加Doctype有所不同。所以那裏 - 一個純粹的CSS解決方案。 ;） – 2009-09-22 20:58:10

我認爲你最好的選擇是由另一個DIV附上兩個div的。然後，你可以通過CSS以下列方式使其：

<html> 
<head> 
<style> 
    div.both:hover .image { border: 1px solid blue } 
    div.both:hover .layer { border: 1px solid blue } 
</style> 
</head> 

<body> 
<div class="section"> 

<div class="both"> 
    <div class="image"><img src="myImage.jpg" /></div> 
    <div class="layer">Lorem Ipsum</div> 
</div> 

</div> 
</body> 
</html>

來源

2009-09-22 21:03:46 Viliam

.section:hover > div { 
    background-color: #0CF; 
}

注意父元素狀態只能影響孩子的元素狀態所以你可以使用：

.image:hover + .layer { 
    background-color: #0CF; 
} 
.image:hover { 
    background-color: #0CF; 
}

但你不能使用

.layer:hover + .image { 
    background-color: #0CF; 
}

來源

2013-09-09 11:45:26 Jnr

CSS：懸停一個元素，影響多個元素？

回答

相關問題