code is very simple. When you hover parent the mouse, it shows the hidden child in the parent. The problem is that when you click child many times at will, the mouse loses and the hover,child disappears. May I ask how to solve the problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 300px;
background: -sharpccc;
position: relative;
}
.parent:hover .child{
display: block;
}
.child{
width: 50px;
height: 30px;
background: red;
position: absolute;
top: 50px;
left: 30px;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
the mouse has been clicked in the red area, and the mouse loses hover (Google Chrome) 
