there is the following code, when the mouse hover, there is a flickering problem, how to solve it?
<html>
<head>
<title></title>
</head>
<body>
<div class="box">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
<style type="text/css">
body{
background-color: -sharpf2f2f2;
}
.child1, .child2{
width: 50px;
height: 50px;
background-color: deeppink;
}
.child1:hover{
display: none;
}
.child1:hover ~ .child2{
display: block;
}
.child2{
display: none;
background-color: blue;
}
</style>