jQuery函数重叠

问题描述 投票:0回答:1

我编码简单的滑动图像。这是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>
jquery
1个回答
0
投票

也许有我丢失的东西在这里,但...为什么做“.menubar”你“鼠标悬停”,但你“.navx”‘鼠标离开’?

你也有一个“菜单栏”班上有四个元素。我想你可能重叠的J​​S的行动。

© www.soinside.com 2019 - 2024. All rights reserved.