CSS:hover一个元素,效果为多个元素?

我正在寻找我hover问题的方法。

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

现在,这两个类(图像和图层)都有边框,都具有不同的颜色,用于常规和hover。 有没有办法做到这一点,如果我hover层类,层和图像类hover边框颜色是活动? 反之亦然?

你不需要这个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> 

这在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来testing这个(我不确定它是否能在那里工作)。

我认为你最好的select是把这两个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> 

这并不难实现,但是您需要使用javascript onmouseover函数。 Pseudoscript:

 <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函数。

我想,你需要使用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的相应:)

要么

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

注意父元素状态只能影响一个孩子的元素状态,所以你可以使用:

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

但是你不能使用

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