如何消除 CSS 中的文本闪烁？答案

【问题标题】：How to remove text flicker in CSS?如何消除 CSS 中的文本闪烁？
【发布时间】：2013-06-24 15:43:04
【问题描述】：

我正在创建一个 div，当您将光标悬停在 div 上时（通过 javascript 和 css），其中的一些文本会淡入。但是当您选择文本并将光标拖出时，文本会闪烁。文本也会在其他一些情况下闪烁。这是头部带有js的html：

<head>
<script>
$(document).ready(function(){
    $('#mainDiv').mouseover(function(){
        $('#mainText').css('opacity', '1');
        $('#mainText').css('transition','all 0.2s ease');
        $('#mainText').css('transition-delay','0.35s');
    });
    $('#mainDiv').mouseout(function(){
        $('#mainText').css('opacity', '0');
        $('#mainText').css('transition','none');
    });
});
</script>
</head>

<body>
<div id = "mainDiv">
<div id="mainText">This is the main text which is inside the Div</div>
</div>

这是 CSS：

#mainDiv{
width:5%;
height:125px;
background-color:#930;
transition:all 0.7s;
display:inline-block;
white-space:nowrap;
box-shadow: 0px 1px 50px #000;
float:left;
color:#FFF;
}
#mainDiv:hover{
width:30%;
alignment-adjust:central;
}
#mainText{
opacity:0;
font-family:"Myriad Pro Light";
font-size:25px;
padding-top:20px;
text-shadow:0.2em 0.2em 0.5em #000;
text-align:center;
}

我认为问题可能在于，当我将鼠标悬停在文本上时，它会脱离 div，因此文本也会变得透明，这需要对代码进行一些小调整（我无法弄清楚） .但是如果有更好的代码来执行这个程序，请告诉我。

【问题讨论】：

Here is an example for you。我的猜测是，将鼠标放在文本元素上会触发 mouseout 事件 div
非常感谢！成功了！

标签： javascript css html text hover

【解决方案1】：

当鼠标悬停在子文本元素上时会触发mouseout 事件。相反，您应该使用mouseleave，当子元素悬停时不会触发：

mouseleave 事件与 mouseout 处理事件的方式不同冒泡。如果在这个例子中使用了 mouseout，那么当鼠标指针移出内部元素，处理程序将是触发。这通常是不受欢迎的行为。 mouseleave 事件，另一方面，仅在鼠标离开时触发其处理程序它绑定到的元素，而不是后代。所以在这个例子中，当鼠标离开外部元素时触发处理程序，但不是内部元素。

试试这样吧：

$('#mainDiv').mouseleave(function(){
...

Here is a working example

【讨论】：