jQuery鼠标悬停以显示隐藏的div，如果只将鼠标悬停在div上，则显示div_Jquery_Html_Sitedesign

jQuery鼠标悬停以显示隐藏的div，如果只将鼠标悬停在div上，则显示div

jquery html

jQuery鼠标悬停以显示隐藏的div，如果只将鼠标悬停在div上，则显示div,jquery,html,sitedesign,Jquery,Html,Sitedesign,我的mouseover和mouseout函数有问题。当我将鼠标移到链接上时，它会显示一个隐藏的，当我将鼠标移出div时，它会隐藏div。问题是，如果我将鼠标移到链接上，然后将鼠标移到其他不在div上的地方，div不会消失如果我使用链接的mouseout事件来设置div的可见性，那么我将无法在div上悬停这是我的HTML： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

我的mouseover和mouseout函数有问题。当我将鼠标移到链接上时，它会显示一个隐藏的

，当我将鼠标移出div时，它会隐藏div。问题是，如果我将鼠标移到链接上，然后将鼠标移到其他不在div上的地方，div不会消失

如果我使用链接的mouseout事件来设置div的可见性，那么我将无法在div上悬停

这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });

                $("#hello").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });
                $("#hello").mouseout(function() {
                    $("#hello").css('visibility', 'hidden');
                });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <a id="show_div" href="#">Link text</a>
        <div id="hello" style="visibility:hidden;">
            <ul>
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>    
</html>


无标题文件
$（文档）.ready（函数（）{
$（“#show_div”）.mouseover（函数（）{
$（“#你好”）.css（‘可见性’、‘可见’）；
});
$（“#你好”）.mouseover（函数（）{
$（“#你好”）.css（‘可见性’、‘可见’）；
});
$（“#你好”）.mouseout（函数（）{
$（“#你好”）.css（‘可见性’、‘隐藏’）；
});
});










咖啡


茶叶


牛奶

我使用setTimeout函数来更改css属性。将setTimeout的间隔设置为~333-500毫秒，并将Div的鼠标悬停设置为清除超时。然后，在div本身的鼠标上，再次设置计时器：）

示例/答案：

// timer for hiding the div
var hideTimer;

// show the DIV on mouse over
$("#show_div").mouseover(function() {
    // forget any hiding events in timer
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

$("#hello").mouseover(function() {
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

// set a timer to hide the DIV
$("#show_div").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

$("#hello").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

// hides the DIV
function hideHello() {
    $("#hello").css('visibility', 'hidden');
}

改用。它允许您指定

handlerIn

和

handlerOut

事件。例如

jQuery

<script type="text/javascript">
  $(document).ready(function() {
    $("#linkdiv").hover(function() {
      $("#hello").show();
    }, function() {
      $("#hello").hide();
    });
  });
</script>


$（文档）.ready（函数（）{
$（“#linkdiv”）.hover（函数（）{
$（“#你好”）.show（）；
}，函数（）{
$（“#你好”）.hide（）；
});
});

HTML



咖啡
茶
牛奶

编辑：在Nick的评论后稍微更改了代码。谢谢Nick。

将整个东西放在一个容器中，然后将鼠标事件放在上面：

试试看：

HTML


无标题文件
$（文档）.ready（函数（）{
$（“show#u div”）。悬停(
函数（）{
$（“#您好”）.show（）；
},
函数（）{
$（“#您好”）.hide（）；
});
});










咖啡


茶叶


牛奶

CSS解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    #link{
      display:inline-block;
      overflow:hidden;
      height:20px;
    }
    #link:hover{
      height:auto;           
    }
  </style>
</head>
<body>
  <br />
  <div id="link">
    <a href="#">Link text</a>
    <ul>
      <li>
          Coffee
      </li>
      <li>
          Tea
      </li>
      <li>
          Milk
      </li>
    </ul>
  </div>
</body>
</html>


#链接{
显示：内联块；
溢出：隐藏；
高度：20px；
}
#链接：悬停{
高度：自动；
}




咖啡


茶叶


牛奶

实际上它们是

mouseenter

和

mouseleave

事件……但是

不是

的子事件，所以这在这里不起作用。正如Nick指出的，要使这两个事件都起作用，你需要将它们都放在一个容器中。添加DIV后，您始终可以立即连接事件处理程序。您希望DIV在隐藏时实际占用页面空间，还是像

下拉列表那样显示在页面顶部？我认为DIV应该显示在顶部。也许，他可以为此设置z索引。是的，我希望它出现在顶部。我已经编辑了我的答案，为您提供源代码。我对jQuery部分不是百分之百满意，因为我使用的是纯javascript，但纯javascript应该可以工作：）如果您有任何问题，我会非常乐意为您回答。abelito-OP的代码运行在jQuery的

ready（）

函数中，因此您可能应该指出

hideHello（）

将需要位于全局命名空间中，或者您需要更改

setTimeout（）

函数以接收对

hideHello

@abelito的本地引用-永远不要，永远不要将字符串传递给

setTimeout（）

，您可以执行

setTimeout（hideHello，333）直接，a）更快，b）消除了许多副作用，就像@patrick所说的那样。@patrick，Nick Craver-注意到了，谢谢你们的知识。我已将上面的代码更改为使用hideHello。感谢您的评论和回答。+1-这是我会选择的路线，除非display:none
是一个选项，在这种情况下，您可以进一步简化它：@Nick:+1toggle（）
如果可能的话会更好。@Bayonian-不确定仅仅因为div
是动态添加的，这会有什么不同，但无论如何，当我返回到您的原始代码时，实际上没有任何问题，只需将一个mouseout
添加到show\u div
@莫龙-可能与您的CSS布局有关。如果有一个保证金，也许。有什么原因不能像我在上面的回答中那样将
和包装在容器中？
<div id='container'>
    <a id="show_div" href="#">Link text</a>
    <div id="hello" style="visibility:hidden;">
        <ul>
            <li>
                Coffee
            </li>
            <li>
                Tea
            </li>
            <li>
                Milk
            </li>
        </ul>
    </div>
</div>

$("#container").mouseover(function() {
    $("#hello").css('visibility', 'visible');
});
$("#container").mouseout(function() {
    $("#hello").css('visibility', 'hidden');
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").hover(
                  function(){
                    $('#hello').show();
                  },
                  function(){
                    $('#hello').hide();
                  });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="show_div">
            <a href="#">Link text</a>
            <ul id="hello" style="display:none;">
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    #link{
      display:inline-block;
      overflow:hidden;
      height:20px;
    }
    #link:hover{
      height:auto;           
    }
  </style>
</head>
<body>
  <br />
  <div id="link">
    <a href="#">Link text</a>
    <ul>
      <li>
          Coffee
      </li>
      <li>
          Tea
      </li>
      <li>
          Milk
      </li>
    </ul>
  </div>
</body>
</html>

$(document).ready(function()
{
    var timer;
    $("#show_div").hover(
        function ()
        {
            $('#hello').show();
        },
        function()
        {
            timer = setTimeout(function(){$('#hello').hide();}, 5000);
        }
    );

    $("#hello").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#hello').show();
        }
    );
}