1

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

4

1 回答 1

1

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

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

试试这样：

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

这是一个工作示例

于 2013-06-24T15:49:10.623 回答