<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width: 300px;
height: 300px;
}
.test{
width: 200px;
height: 200px;
background-color: red;
}
.test1:hover{
display: none;
}
.test2:hover > .item{
display: none;
}
</style>
</head>
<body>
<div class="content">
<div class="test test1">
:hover display: none 不断闪现
</div>
</div>
<div class="content">
<div class="test test2">
<div class="item">
这个影藏了不会闪现
</div>
</div>
</div>
</body>
</html>
如上面的 代码：
造成闪现的原因：
当上面代码中 class="test1" 被 hover 后就隐藏，但是隐藏后该元素就没有被hover住了又会显示出来。显示出来后又被hover 又被隐藏。这样不断重复就成了上面的不断闪的效果。
我的解决方法：
我在test1 div 的代码基础上增加了一个子元素。形成了test2 div的代码。 把内容写在子元素里面。当我想要hover隐藏内容时就隐藏被hover对象的子元素。那样hover的作用也会一直生效。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
你还有其他的解决方法吗？欢迎分享相应的解决方法。