[CSS] 使用Css Hover 时隐藏Div 导致死循环，不断闪现。

本文链接：https://blog.csdn.net/qq_36537108/article/details/82958428

<!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的作用也会一直生效。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

你还有其他的解决方法吗？欢迎分享相应的解决方法。