在悬停后的另一个元素时更改该元素的属性
在悬停后的另一个元素时更改该元素的属性
提问于 2018-01-14 06:50:08
我有两个div，我想通过悬停第二个div来改变第一个的颜色。我找到了解决方案，当“悬停”的目标出现之前，它的css应该被改变，如果“悬停”之后呢？没有javascript能做什么？
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
}
.box-2:hover + .box {
background-color: green;
}<body>
<div class="wrapper">
<div class="box"></div>
<div class="box-2"></div>
</div>
</body>
回答 2
Stack Overflow用户
发布于 2018-01-14 06:53:04
一种解决方案是可视化地颠倒的顺序，并将顺序保留在DOM中，这样您仍然可以使用+选择器。
下面是一个使用flex的示例：
.wrapper {
display:flex;
flex-direction:column;
}
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
order:2; /* this will make box-2 goes after */
}
.box-2:hover + .box {
background-color: green;
}<body>
<div class="wrapper">
<div class="box-2"></div>
<div class="box"></div>
</div>
</body>
一些相关的问题可以获得更多的想法：
Stack Overflow用户
发布于 2018-01-14 07:22:00
虽然Temani的答案是一个很好的技术，但如果您需要使用:not()选择器，我有一个替代建议，尽管由于您的利润率，它有点随意。
如果您检查.wrapper元素上的悬停，则可以在框未悬停时设置其样式，如下所示：
.wrapper:hover > .box:not(:hover) {
background-color: green;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48245021
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号