CODEWITHSUNDEEP
htmlcsshover
James M
James M

Reputation: 87

Hover div flickers when rolling mouse over

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>

View on jsFiddle

Upvotes: 2

Views: 2267

Answers (1)

showdev
showdev

Reputation: 29168

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>

Upvotes: 3

Related Questions