CSS：悬停一个元素，对多个元素的效果？ [英] CSS: Hover one element, effect for multiple elements?
本文介绍了CSS：悬停一个元素，对多个元素的效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为我的悬停问题寻找方法。
I'm looking for method for my hovering issue.
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
现在，这两个类（图像和图层）都有边框，正常和悬停都有不同的颜色。
有办法使如果我悬停图层类，图层和图像类悬停边框颜色是活动的吗？
Now, both classes (image and layer) has borders, both have different color for normal and hover. Is there way to make so if I hover layer class, both layer and image class hovering border color is active? And vise versa?
推荐答案
您不需要使用JavaScript。
You don't need JavaScript for this.
有些CSS会这样做。下面是一个例子：
Some CSS would do it. Here is an example:
<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>
这篇关于CSS：悬停一个元素，对多个元素的效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
