我编码简单的滑动图像。这是2个图像。图像2是在图像1和图像2是透明图像。在鼠标悬停事件IMAGE2淡入的图像URL,它是在一个元素的数据。并且当它的完整的,图像1源改变图像2源和发生这种情况对每个元素鼠标。但问题是我写mouseLeave事件为量变到质变图像1的源时鼠标离开菜单栏。在鼠标悬停代码重写图像1源。我不知道为什么会发生或者为什么离开菜单区域触发鼠标悬停功能。这里是代码:
$(document).on('mouseover', '.menubar', function() {
var ID = $(this).attr('data-image');
if ($('#slides').attr('src') != ID) {
$('#slides').fadeOut(10, function() {
//alert($(this).attr('src'));
$(this).attr('src', ID).bind('onreadystatechange load', function() {
if (this.complete) $(this).fadeIn(500, function() {
if (this.complete) {
$("#slides3").attr("src", ID);
}
});
});
});
}
});
$(document).on('mouseleave', '.navx', function() {
$("#slides").attr("src", 'images/trans.png');
$('#slides3').attr('src', "images/1-new.png");
});
这是HTML代码:
<ul class="navx">
<div class="topnav" id="myTopnav">
<div class="activex dropdown menubar" data-image="images/1-new.png"><button class="dropbtn" id="menubutton" data-link="#">menu1</button>
<div class="dropdown-content">
<a href="#">submenu1</a>
<a href="#">submenu2</a>
<a href="#">submenu3 </a>
</div>
</div>
<a href="#" class=" singlemenu menubar" data-image="images/2-new.png">menu2</a>
<div class=" dropdown menubar" data-image="images/3-new.png">
<button class="dropbtn" id="menubutton" data-link="#">menu3</button>
<div class="dropdown-content">
<a href="#">submenu1 </a>
<a href="#">submenu2</a>
</div>
</div>
<a href="#" class=" singlemenu menubar" data-image="images/4-new.png">menu4</a>
</div>
</ul>
也许有我丢失的东西在这里,但...为什么做“.menubar”你“鼠标悬停”,但你“.navx”‘鼠标离开’?
你也有一个“菜单栏”班上有四个元素。我想你可能重叠的JS的行动。