css - hover某个元素，使另一个元素发生变化,hover 失效
本文介绍了css - hover某个元素，使另一个元素发生变化,hover 失效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
/*.container:hover ul.ul li:nth-child(2){
background: #000;
}*/
.wrap{
width: 100px;
height: 100px;
background: #6c0;
}
/*hover失效*/
.container:hover div.wrap{
background: red;
}
</style>
</head>
<body>
<div class="container">
<ul class="ul">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="wrap"></div>
</body>
解决方案
默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式，被改变的元素必须是被hover元素的子元素，但你现在container和wrap不是父子关系，而是兄弟关系，那么你必须要这样设置了。
.container:hover +.wrap{
background: red;
}这篇关于css - hover某个元素，使另一个元素发生变化,hover 失效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
