Question

嗨我有一个菜单和子菜单，子菜单有一个div元素。当我将鼠标悬停在我的第一个菜单li的超链接上时，我能够获取div元素，但当我取出我的时，它不会消失鼠标来自div元素。它不断出现，所以我想隐藏div元素当我鼠标输出div或其他地方。鼠标输出我没有写“显示”的代码，“无”由于这个悬停链接它但它仍然有效。

HTML

<ul class="main-nav">
<li ><a href="#" id="menu1">Products & Services</a></li>
<li><a href="#" id="menu1">Solution and Technologies</a></li>
<li><a href="#" id="menu1">About Us</a></li>
<li><a href="#" id="menu1">Investors</a></li>
<li style="border:none;"><a href="#" id="menu1">Newsroom</a></li>
</ul>
<!--1st drop down menu -->
<div id="dropmenu1"  class="dropmenudiv" style=" position:absolute; font-size:12px; z-index:1;  display:none;  border:1px solid #D8D8D8;">
<a id="consumer1" style="visibility:hidden;"  href="#">Consumer & Home</a>
<a href="#">Aerospace & Defense</a>
<a href="#">Safety & Security</a>
<a href="#">Scanning & Mobile Productivity</a>
</div>

的CSS

  .dropmenudiv a{ background:url(images/dropdown_bg.jpg); text-decoration:none; display:block; line-height:14px; padding:2px;}
    ul.main-nav{list-style:none; border:1px solid #666; overflow:hidden; background:url(images/mnu_grad_normal.jpg) repeat-x; height:37px; line-height:36px;}
    ul.main-nav li { float:left; font-size:12px; border-right:1px solid #999; padding:0px 32px;}
    ul.main-nav li a{ color:#000000; text-decoration:none;}
    ul.main-nav li a:hover{ color:#FF0000;}

JS：

 $(document).ready(function() {
        $('#menu1').mouseover(function(){
        $('#dropmenu1').css("display","block");
        $('#dropmenu1').css({'width':'202px','height':'auto'});
      $('#menu1').mouseout(function(){
        });

Answer 1

没有javascript就可以了。仅限Css菜单Css Dropdown menu 以及指向Fiddle

的链接

<ul id="nav">
<li ><a href="#">Products & Services</a>
  <ul>
      <li><a id="consumer1" href="#">Consumer & Home</a></li>
      <li><a href="#">Aerospace & Defense</a></li>
      <li><a href="#">Safety & Security</a></li>
      <li><a href="#">Scanning & Mobile Productivity</a></li>
  </ul>
</li>
<li><a href="#">Solution and Technologies</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Investors</a></li>
<li style="border:none;"><a href="#">Newsroom</a></li>

</ul>
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
       float:left;
    width:100%;
   }
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}
#nav ul{
    background:#fff;
    background:rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px;
}
#nav ul li{
    padding-top:1px;
    float:none;
}
#nav ul a{
    white-space:nowrap;
}
#nav li:hover ul{ 
    left:0; 
}
#nav li:hover a{ 
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ 
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}

Answer 2

与.on()绑定

$(document).on('mouseenter','#divid',function(){
  // ...
})

$(document).on('mouseleave','#divid',function(){
  // ...
})

考虑使用hover

.hover（）方法为mouseenter和mouseleave事件绑定处理程序。您可以使用它在鼠标位于元素中时简单地将行为应用于元素。

用法：

$(selector).hover(handlerIn, handlerOut)

伪解决方案：

http://jsfiddle.net/7PH6d/1/

进一步阅读：

The friggin' API

Answer 3

你必须关闭.mouseover。您的mouseout函数位于鼠标悬停功能中：

$(document).ready(function() {
      $('#menu1').mouseover(function(){
        $('#dropmenu1').css("display","block");
        $('#dropmenu1').css({'width':'202px','height':'auto'});
      }); //<----Close the mouseover
      $('#menu1').mouseout(function(){
        $("#dropmenu1").css("display","none"); //Should work
      });

Answer 4

首先使您的标识符唯一，然后您可以setTimeout在鼠标离开主菜单链接后立即暂停目标div的消失。该脚本可能如下所示：

$(document).ready(function () {
    var target_div = null; // div#dropmenu1 etc.
    var timer = false; // for delayed hide
    $('.main-nav a').mouseenter(function () {
        if (timer) {
            clearTimeout(timer);
            timer = false;
        }
        $('.dropmenudiv').css('display', 'none'); //hide all divs
        target_div = $('#drop' + this.id); // #dropmenu1 etc.
        target_div.css({
            "display": "block", //show
            'width': '202px',
                'height': 'auto'
        });
    }).mouseleave(leaving);

    $('.dropmenudiv').mouseenter(function () {
        if (timer) {
            clearTimeout(timer);
            timer = false;
        }
        target_div = $(this);
    }).mouseleave(leaving);

    function leaving() {
        target_div = null;
        timer = setTimeout(function () {
            var divs = $('.dropmenudiv');
            if (target_div) {
                divs = divs.not(target_div);
            }
            divs.css('display', 'none');
            timer = false;
        }, 2000); //hide after two seconds
    }
});

工作jsfiddle：http://jsfiddle.net/7PH6d/4/

Answer 5

您对页面中的多个元素使用了相同的ID，这不是正确的过程。

我做了一些改动并且它正在工作，它可能会回答这个问题，但我建议你阅读有关创建菜单的教程，因为这看起来很乱。

这是小提琴：http://jsfiddle.net/Te3dW/

Javascript功能：

$(document).ready(function(){
    $('li:nth-child(1),#dropmenu1').hover(function(){
    $('#dropmenu1').css("display","block");
    $('#dropmenu1').css({'width':'202px','height':'auto'});
    },function(){
        $('#dropmenu1').css("display","none");
    });
});

快乐编码

如何在鼠标输出时消除子菜单div元素

5 个答案: