CSS：悬停一个元素，对多个元素有影响吗？
我正在寻找一种解决悬停问题的方法。
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
现在，图像和图层这两个类都有边框。两者的正常和悬停都有不同的颜色。有办法做到这一点，所以如果我将图层类悬停，则图层和图像类的悬停边框颜色都处于活动状态？反之亦然？
慕妹3146593浏览 607回答 3
3回答
-
30秒到达战场
您不需要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
我认为最好的选择是将两个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>
随时随地看视频慕课网APP
Html/CSS