Question

我正在创建一个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，因此文本也变得透明，这需要在代码中进行一些小调整（我无法弄清楚）。但是如果有更好的代码来执行这个程序，请告诉我。

Answer 1

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

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

请尝试这样：

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

Here is a working example

如何删除CSS中的文本闪烁？

1 个答案: