Question

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

HTML

    <div class="belowcont">
         <div class="circles">
         <img class="circleimg" src="circle1.jpg"/>
         <p class="circletext"> Multi Award Winning Film </p>
         </div>
         <div class="circles">
         <img class="circleimg" src="circle2.jpg" />
         <p class="circletext"> A Story Of Shanes Life </p>
         </div>
         <div class="circles">
         <img class="circleimg" src="circle3.jpg"/>
         <p class="circletext">Set In The East Midlands </p>
         </div>
    </div>

CSS

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

.circles {
         width:180px;
         height:180px;
         background:url(circles.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:white;
             width:160px;
             text-align:center;
             margin:80px auto; 
             visibility:hidden;}

Answer 1

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

尝试将默认文字类设置为：visibility: visible。

，而不是使用opacity: 0

然后悬停：

opacity: 1;
transition: opacity 1s;

我已经删除了一些不使用的代码，并且绝对将文本定位在图像中。

似乎好多了。只要有一个关于定位的小提琴，你就会好起来。（双关语与小提琴的关系＆＃39;）

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

修改经过一番思考，为什么它闪烁，似乎是在悬停时将文本移动到图像上的方法。当您将鼠标悬停在图像上时，它会进行检查（伪代码）

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

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

Answer 2

我认为它与z-index有关：-100。如果删除它，则闪烁消失。我的猜测是顶部还有其他元素使光标悬停在它们上面而不是所需的元素上。你有没有设置这样的z-index的原因？如果您想隐藏它，也许您可以尝试更改它的可见性或不透明度。

我很难确切地看到你正在尝试做什么，因为我没有图像。

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

.circles {
     width:180px;
     height:180px;
     background:url(circles.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; // removed z-index here
       transition:all 1s linear;
        }

.circletext {
         position: relative; // needed for z-index
         color:white;
         width:160px;
         text-align:center;
         margin:80px auto; 
         visibility:hidden;
         z-index: 1; // keeps text on top of image
         pointer-events: none; // stops pointer from triggering new hover over the text
}

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

Answer 3

@ Jezzabeanz的回答是正确的。但是，将此块添加到css中可防止当鼠标悬停在文本

上时文本消失

.circletext:hover{
      opacity: 1;
      transition: opacity 1s;

}

Answer 4

此处：http://jsfiddle.net/ctwheels/a2kdqcnt/我认为问题出在position:absolute;和z-index:-100;上。不要引用我的话。在原始代码中，悬停不是闪烁的＆＃34;它是一个水平的像素线，是图像的一部分，一个没有，在图像上垂直复制，好像浏览器无法确定它属于哪里

<强> HTML

<div class="belowcont">
    <div class="circles">
        <img class="circleimg" src="http://wpdemo.rohitink.com/sixteen/wp-content/uploads/2013/03/image-alignment-150x150.jpg" />
        <p class="circletext">Multi Award Winning Film</p>
    </div>
    <div class="circles">
        <img class="circleimg" src="http://wpdemo.rohitink.com/sixteen/wp-content/uploads/2013/03/image-alignment-150x150.jpg" />
        <p class="circletext">A Story Of Shanes Life</p>
    </div>
    <div class="circles">
        <img class="circleimg" src="http://wpdemo.rohitink.com/sixteen/wp-content/uploads/2013/03/image-alignment-150x150.jpg" />
        <p class="circletext">Set In The East Midlands</p>
    </div>
</div>

<强> CSS

.belowcont {
    width:100%;
    height:200px;
    border:1px dashed black;
    margin-top:2px
}
.circles {
    width:180px;
    height:180px;
    border-radius:50%;
    margin-left:120px;
    margin-top:10px;
    float:left;
}
.circleimg {
    width:180px;
    height:180px;
    border-radius:50%;
    position:absolute;
}
.circleimg:hover + .circletext {
    opacity:1;
    transition:opacity 1s;
}
.circletext:hover {
    opacity:1;
    transition:opacity 1s;
}
.circletext {
    color:white;
    width:160px;
    text-align:center;
    margin:80px auto;
    opacity:0;
    position:absolute;
}

为什么它在悬停时闪烁？

4 个答案: