为什么悬停时会闪烁？

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

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