我正在寻找悬停问题的方法.
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
现在,两个类(图像和图层)都有边框,两者都有正常和悬停的不同颜色.有没有办法这样做,如果我悬停图层类,层和图像类悬停边框颜色是活跃的？反之亦然？
cor*_*ews 179
你不需要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>Ste*_*ham 11
这在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来测试它(我不确定它是否会在那里工作).
Vil*_*iam 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>
这并不难实现,但您需要使用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函数.