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 可见并且鼠标悬停在其上时，.hoverbase 的 :hover Action 被取消并且 .hovertop 消失。那时，.hovertop 不再覆盖 .hoverbase 并且 :hover Action 被恢复。只要您的鼠标悬停在 .hovertop 上，这种交替就会快速发生并永远重复，从而产生闪烁效果。

在您的 :hover 状态选择器中包含 .hovertop。这样，无论鼠标悬停在 .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>