滚动鼠标时悬停div闪烁

Question

我有一个 div，当悬停在另一个 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>

在 jsFiddle 上查看

Answer 1

正如您似乎知道的那样， .hovertop闪烁是因为悬停和不悬停之间的快速交替。 当.hovertop可见且鼠标:hover在其上时， .hoverbase的:hover动作被取消， .hovertop消失。 那时， .hovertop不再覆盖.hoverbase并且:hover操作被恢复。 只要您的鼠标悬停在.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>