html - 为什么它在悬停时闪烁？

Question

我遇到了一个问题。我做了一个悬停过渡。当鼠标在图像上移动时，它会在悬停和未悬停状态之间闪烁。当鼠标仍在图像上时，它会按应有的方式工作。有人能找到问题吗？

.belowcont {
  width: 100%;
  height: 200px;
  border: 1px dashed black;
  margin-top: 2px
}

.circles {
  width: 180px;
  height: 180px;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Intersection_of_3_circles_7.svg/1200px-Intersection_of_3_circles_7.svg.png);
  background-size: 100%;
  background-image: no-repeat;
  ;
  border-radius: 50%;
  margin-left: 120px;
  margin-top: 10px;
  float: left;
  margin-left: 120px;
  margin-top: 10px;
  float: left;
}

.circleimg {
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

.circleimg:hover {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: absolute;
  z-index: -100;
  transition: all 1s linear;
}

.circleimg:hover~.circletext {
  visibility: visible;
}

.circletext {
  color: black;
  width: 160px;
  text-align: center;
  margin: 80px auto;
  visibility: hidden;
}

<div class="belowcont">
  <div class="circles">
    <img class="circleimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Intersection_of_3_circles_0.svg/800px-Intersection_of_3_circles_0.svg.png" />
    <p class="circletext"> Multi Award Winning Film </p>
  </div>
  <div class="circles">
    <img class="circleimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Intersection_of_3_circles_3.svg/2146px-Intersection_of_3_circles_3.svg.png" />
    <p class="circletext"> A Story Of Shanes Life </p>
  </div>
  <div class="circles">
    <img class="circleimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Intersection_of_3_circles_7.svg/1200px-Intersection_of_3_circles_7.svg.png" />
    <p class="circletext">Set In The East Midlands </p>
  </div>
</div>

Answer 1

我不确定为什么会这样，但是我可以提供一个我从未遇到过这个问题的不同解决方案。

不要使用 visibility: visible 尝试将默认文本类设置为:opacity: 0。

然后悬停:

opacity: 1;
transition: opacity 1s;

我删除了一些无用的代码并将文本绝对定位在图像中。

看起来好多了。只需摆弄一下定位，您就可以开始了。 (双关语意在“摆弄”)

http://jsfiddle.net/fjgu0s4q/1/

编辑:在对它闪烁的原因进行了更多思考之后，这似乎是在悬停时将文本向上移动到图像上方的方法。当您将鼠标悬停在图像上时，它会进行检查(伪代码)

If mouse move == true then 
   if hovering over element
    // do specified task
   end if
end if

因此，如果您移动一个像素，它必须一次又一次地检查，因此它必须在移动时将文本移回其默认状态。由于您的方法不是最有机的方法，这似乎就是它闪烁的原因。它不断上下移动文本，同时检查鼠标定位的状态。