Question

向下菜单，我正在使用jquery来淡入。问题是，一旦鼠标离开区域，我无法找到如何淡化它。我有一个标题，当悬停在一个div名称下显示3个下拉列表时。问题是，一旦它消失了，当鼠标不在所有div中的标记时，我无法淡出。请帮忙

Code:

<JQuery>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
        $(document).ready(function(){
        $(".menu-ite").hover(function(){
        $(".menu-item").fadeIn();
        $(".menu-item").fadeIn("slow");
        $(".menu-item").fadeIn(3000);

    });
});

Answer 1

$(".menu-item").on({
    mouseenter: function () {
        //Do stuff when mouse hovers
    },
    mouseleave: function () {
        //Do stuff when mouse leaves
    }
});

您可以使用.on()处理程序执行多项操作。

.hover()拥有自己的处理程序，您可以在此处详细了解：http://api.jquery.com/hover/

或者，如果您正在处理文档准备好后创建的对象，则可以使用：

$(".menu-item").on('mouseenter', '.selector', function() {
    //Do stuff when mouse hovers
});
$(.menu-item").on('mouseleave', '.selector', function() {
    //Do stuff when mouse leaves
});

Answer 2

$(document).ready(function(){
  $(".menu-item").hover(function(){
    $(".menu-item").fadeIn();
    $(".menu-item").fadeIn("slow");
    $(".menu-item").fadeIn(3000);
  }, function(){
    $(".menu-item").fadeOut();
    $(".menu-item").fadeOut("slow");
    $(".menu-item").fadeOut(3000);
  });
});

参考：https://api.jquery.com/hover/#hover1

使用Jquery淡出

2 个答案: