Question

我将鼠标悬停在另一个div上时出现。

然而，当我尝试将鼠标移动到出现的div上时，它会闪烁。我理解这是因为我的CSS而发生，但无法弄清楚我应该做些什么来纠正。

以下是http://jsfiddle.net/jmoore91/gf4fwyf2/

的示例

我的代码：

HTML

<div class='hoverbase'>
    <a href=http://www.google.com.au>
        <img src='http://images2.layoutsparks.com/1/242775/fairy-funky-abstract-image.jpg'/></a>
            <div class='hovertop'>
                 <a href=http://google.com.au><h2>Project HA</h2></a>
            </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; 
  }

谢谢

詹姆斯

Answer 1

你似乎意识到，.hovertop因为悬停和不悬停之间的快速交替而闪烁。当.hovertop可见并且鼠标悬停在:hover上时，.hoverbase的{{1}}操作将被取消，.hovertop消失。此时，.hovertop不再覆盖.hoverbase，并且:hover操作已恢复。只要您的鼠标超过.hovertop，这种交替就会很快发生并永久重复，从而导致闪烁效果。

在.hovertop州选择器中加入:hover。这样，无论鼠标是.hoverbase还是.hovertop，它都会保持可见。

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

在英语中，这意味着：如果鼠标位于.hoverbase或.hovertop之上，请显示.hovertop。

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

滚动鼠标时，鼠标悬停div闪烁

1 个答案: