html - 鼠标悬停时div闪烁

Question

我有一个 div，当鼠标悬停在另一个 div 上时会出现。

但是，当我尝试将鼠标移到出现的 div 上时，它会闪烁。 我知道这是由于我的 CSS 造成的，但不知道我应该采取什么措施来纠正。

.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

Answer 1

正如您所知，.hovertop由于悬停和非悬停之间的快速交替而闪烁。当.hovertop可见并且鼠标悬停在其上，:hover .hoverbase的行动被取消并且 .hovertop消失。那时，.hovertop不再覆盖.hoverbase和 :hover行动被恢复。这种交替发生得很快，并且只要鼠标悬停就会永远重复.hovertop ，产生闪烁效果。

包括.hovertop在你的:hover状态选择器。这样，无论鼠标悬停在.hoverbase上，它都将保持可见。或.hovertop .

.hoverbase a:hover + .hovertop,
.hovertop:hover { /* << added this */
    visibility:visible; 
 }

在英语中，这翻译为:如果鼠标悬停.hoverbase或.hovertop ，显示.hovertop .

工作示例:

.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>