本文介绍了CSS:悬停一个元素，多个元素的效果?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我正在寻找解决悬停问题的方法.
I'm looking for a 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, have borders. Both have different color for normal and hover. Is there way to make it, 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:悬停一个元素，多个元素的效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)