Question

我知道这会在给定的ID上生成hoverOver和hoverOut函数：

$(document).ready(function(){
    $("#link").hover(
        function(){
            $("#div").css({"display":"block"});
        },
        function(){
            $("#div").css({"display":"none"});
        }
    )
});

但是当鼠标离开主要div时，我希望#div显示为none，其中包含id为#main的每个内容并且也淡出。所以我跑了这个：

$(document).ready(function(){
    $("#link").hover(
        function(){
            $("#div").css({"display":"block"});
        };
    $("#main").hoverOut(
        function(){
            $("#div").fadeOut('slow').css({"display":"none"});
        };
});

但是代码没有将#div显示为无。请继续使用jQuery，所以我需要任何有更好想法的人的帮助。这是html更好的解释：

<div id="main">
    <a href="javascript:;" id="link">hover here</a>
    <div id="div">this is the content</div>
</div>

Answer 1

您可以使用 mouseenter() 和 mouseleave()

根据文件：

hover() 方法会为mouseenter和mouseleave事件绑定处理程序。

致电$( selector ).hover( handlerIn, handlerOut )是以下的简写：   $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

$(document).ready(function() {
  $("#link").mouseenter(function() {
    $("#div").show(); // you can use show() method to show an element
  })
  $('#main').mouseleave(function() {
    $("#div").fadeOut('slow'); // fadeOut will hide the element, no need to hard-code css method 
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <a href="javascript:;" id="link">hover here</a>
  <div id="div">this is the content</div>
</div>

Answer 2

当光标进入主div时，它会显示#div，当光标离开主div时，它会隐藏#div，即从块显示为无。

Jquery的，

$(document).ready(function(){
$("#main").mouseenter(function(){
    $("#div").css('display','block');
});
$("#main").mouseleave(function(){
    $("#div").css('display','none');
});
});

Answer 3

这是你的意思吗？

使用JS将初始状态设置为display: none作为内联样式
当鼠标进入#link时，淡入#div
当鼠标离开#main时，淡出#div

示例：

$(document).ready(function() {
  $("#div").css("display", "none");
  $("#link").on("mouseenter", function() {
    $("#div").fadeIn('slow');
  });
  $("#main").on("mouseleave", function() {
    $("#div").fadeOut('slow');
  });

});

http://codepen.io/anon/pen/oxrRJZ

Jquery悬停在div之外

3 个答案: