我正在寻找一种解决悬停问题的方法。<div class="section"><div class="image"><img src="myImage.jpg" /></div><div class="layer">Lorem Ipsum</div></div>现在，图像和图层这两个类都有边框。两者的正常和悬停都有不同的颜色。有办法做到这一点，所以如果我将图层类悬停，则图层和图像类的悬停边框颜色都处于活动状态？反之亦然？
3 回答
30秒到达战场
TA贡献1828条经验 获得超6个赞
您不需要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>
ABOUTYOU
TA贡献1812条经验 获得超5个赞
我认为最好的选择是将两个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>
- 3 回答
- 0 关注
- 605 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消