我正在寻找一个方法来解决我的悬停问题。
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
现在,图像和图层这两个类都有边界。两者对于正常和悬停都有不同的颜色。有没有办法让它,所以如果我悬停层类,层和图像类悬停边框颜色都是活动的?反之亦然?
发布于 2009-09-22 20:58:18
你不需要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:38:25
这对我在火狐、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 21:03:46
我认为对您来说最好的选择是将两个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>
https://stackoverflow.com/questions/1462360
复制相似问题