Onmouseenter/Onmouseleave fadeOut 不工作

Question

将鼠标悬停在 .f_bb div 上时，它应该只显示 .f_bloc 并向其添加 class。当悬停结束时（当光标离开它时），它应该淡出并隐藏。但出于某种原因，我无法让它工作。

HTML

<div id="fc3"><div class="f_bb">test
<div class="f_bloc">roat</div></div></div>

CSS

.test {color: red}
.f_bloc {display: none}

JS

$(document).ready(function() {
    $("#fc3 .f_bb").onmouseenter(function() {
        $(this).closest(".f_bloc").show();
        $(this).closest(".f_bloc").addClass("test");
    });
});

$(document).ready(function() {
    $("#fc3 .f_bb").onmouseleave(function() {
        $(this).closest(".f_bloc").fadeOut( 1000, function() {
            $(this).closest(".f_bloc").hide();
        });
    });
});

Jsfiddle：https://jsfiddle.net/ebcm08tL/ 已更新 https://jsfiddle.net/ebcm08tL/2/

Answer 1

jQuery 使用 .mouseenter() 和 .mouseleave()，而不是 .onmouseenter() 和 .onmouseleave()。

Answer 2

问题是您使用了 .closest() 方法。使用 .children() 方法对我来说效果很好，如果没有，你还必须包括 jquery。

$(document).ready(function() {
$("#fc3 .f_bb").mouseover(function() {
  $(this).children(".f_bloc").show();
  $(this).children(".f_bloc").addClass("test");
 });
});

$(document).ready(function() {
$("#fc3 .f_bb").mouseleave(function() {
  $(this).children(".f_bloc").fadeOut( 1000, function() {
  $(this).children(".f_bloc").hide();
  });
 });
});

.test {color: red}
.f_bloc {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fc3"><div class="f_bb">test
<div class="f_bloc">roat</div></div></div>

Answer 3

一个好的方法是先取消绑定任何现有事件（可以指定名称）以避免重复：

    $("#fc3 .f_bb").unbind('mouseenter.fc3').on('mouseenter.fc3', function (event) {
        // mouseenter actions
    });

    $("#fc3 .f_bb").unbind('mouseleave.fc3').bind('mouseleave.fc3', function (event) {
        // mouseleave actions
    });

Answer 4

尝试向包含 roat 文本的 div 添加 id，并尝试使用 children() 而不是 closest() 作为 div您要查找的实际上是 children.

工作演示

$(document).ready(function() {
  $("#fc3 .f_bb").mouseenter(function() {

    $(this).children("#block").show();
    $(this).children("#block").addClass("test");
  });

  $("#fc3 .f_bb").mouseleave(function() {
    $(this).children("#block").fadeOut(1000, function() {
      $(this).children("#block").hide();
    });
  });
});

.test {
  color: red
}
.f_bloc {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fc3">
  <div class="f_bb">test
    <div id="block" class="f_bloc">roat</div>
  </div>
</div>

Answer 5

我认为你的问题是 closest()，我使用 find() 来找到你想要的 class

$(document).ready(function() {
  $("#fc3 .f_bb").mouseenter(function() {
    var f_bloc = $(this).children(".f_bloc");
    f_bloc.show();
    f_bloc.addClass('test');


  });
  $("#fc3 .f_bb").mouseleave(function() {
    var f_bloc = $(this).children(".f_bloc");
    f_bloc.fadeOut( 1000, function() {
      f_bloc.hide();
    });
  });                
});

.test {color: red}
.f_bloc {display: none  }

<div id="fc3">
  <div class="f_bb">
    test

    <div class="f_bloc"> roat </div>
  </div>
</div> 
<script src="https://code.jquery.com/jquery.js"></script>

Onmouseenter/Onmouseleave fadeOut 不工作

Onmouseenter/Onmouseleave fadeOut wont work

jquery

fadeout