I have a div that appears when hovering over another div.
However when I try to move the mouse over the div that appears it flickers. I understand this is happening because of my CSS, but can not figure out what I should do to rectify.
.hoverbase { width: 300px; height: 300px; position: relative; } .hovertop { height: 200px; width: 200px; border: 2px solid red; background-color: white; position: absolute; top: 50px; left: 50px; margin: auto; visibility: hidden; } .hoverbase a:hover+.hovertop { visibility: visible; }
<div class='hoverbase'> <a href=http://www.google.com.au> <img src='https://fakeimg.pl/300x300/949598/888888/' /></a> <div class='hovertop'> <a href=http://google.com.au> <h2>Project HA</h2> </a> </div> </div>
As you seem to be aware, .hovertop
flickers because of quick alternation between hovering and not hovering. When .hovertop
is visible and the mouse is over it, the :hover
action of .hoverbase
is cancelled and .hovertop
disappears. At that point, .hovertop
is no longer covering .hoverbase
and the :hover
action is reinstated. This alternation happens quickly and repeats forever as long as your mouse is over .hovertop
, resulting in a flickering effect.
Include .hovertop
in your :hover
state selector. That way, it will remain visible whether the mouse is over .hoverbase
or .hovertop
.
.hoverbase a:hover + .hovertop,
.hovertop:hover { /* << added this */
visibility:visible;
}
In English, this translates to: If the mouse is over .hoverbase
OR .hovertop
, show .hovertop
.
Working example:
.hoverbase { width: 300px; height: 300px; position: relative; } .hovertop { height: 200px; width: 200px; border: 2px solid red; background-color: white; position: absolute; top: 50px; left: 50px; margin: auto; visibility: hidden; } .hoverbase a:hover+.hovertop, .hovertop:hover { visibility: visible; }
<div class='hoverbase'> <a href=http://www.google.com.au> <img src='//via.placeholder.com/350x150' /></a> <div class='hovertop'> <a href=http://google.com.au> <h2>Project HA</h2> </a> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.