Question

我正在编码一个简单的滑动图像。这是2张图片。图像2在图像1上方，图像2是透明图像。在鼠标悬停事件上，image2淡入元素数据中的图像URL。完成后，图像1源更改为图像2源，并且每当鼠标移到元素上时就会发生这种情况。但是问题是当鼠标离开菜单栏时，我编写了mouseleave事件来更改图像1的来源。 mouseover中的代码重写了image 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>

Answer 1

也许我在这里缺少一些东西，但是...为什么在'.menubar'上使用'mouseover'，而在'.navx'上使用'mouseleave'？

您还具有四个带有“菜单”类的元素。我认为您可能正在重叠JS操作。

jQuery函数重叠

1 个答案: