After coming across this query on Stack Overflow about adding a class without jQuery if hovering over another class
I encountered an issue with a div element that displays upon hovering over a span, which was functioning correctly.
However, I also have another animated div on the same site using animate.css.
The problem arises when the display property of the first div changes from 'none' to 'block,' causing it to blink or flutter uncontrollably.
I noticed that making this CSS change using jQuery prevents the blinking effect. What could be causing this difference?
Although the given code snippet works seamlessly, I'm puzzled as to why it does not work properly on my webpage.
.cl_maindiv>.cl_span_icon:not(:hover)+.cl_icon_content{
/*Styles without :hover*/
display:none;
}
.cl_maindiv>.cl_span_icon:hover+.cl_icon_content{
/*Styles with :hover*/
display:block;
text-align: center;
position: absolute;
font-size: 9px;
top: 1px;
margin: 0px;
right: 14px;
background-color: rgba(68, 68, 68, 0.90);
border-radius: 2px;
border: 1px solid rgba(50, 197, 210, 0.90);
box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.25);
min-width: 30px;
color: #ddd;
text-shadow: 0 -1px 0 #111;
}<div id="maindiv" class="cl_maindiv" style="float:left;border:1px solid #ff0000;">
<label>123</label>
<span class="cl_span_icon"> :-)) </span>
<div id="icon_content_div" class="cl_icon_content"> more happy faces :-))</div>
</div>
<link rel="stylesheet" href="https://www.4u.tools/assets/plugins/animate.css-master/animate.min.css">
<div id="animdiv" class="animated pulse" style="animation-iteration-count: infinite; float:left;border:1px solid #ff0000;"> <h2>I'm a animated div!</h2></div>Any suggestions on how to resolve this issue and prevent the blinking/fluttering behavior?