CSS:悬停一个元素，对多个元素有影响吗？
CSS:悬停一个元素，对多个元素有影响吗？
提问于 2009-09-23 04:22:46
我正在寻找一个方法来解决我的悬停问题。
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>现在，图像和图层这两个类都有边界。两者对于正常和悬停都有不同的颜色。有没有办法让它，所以如果我悬停层类，层和图像类悬停边框颜色都是活动的？反之亦然？
回答 5
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 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来测试一下(我不确定它是否能在那里工作)。
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1462360
复制相关文章
相似问题