当鼠标离开触发器并滑下内容时，如何编码滑下的内容以便滑动？

当鼠标离开这个div时，我得到了webdsn-drop，但是当鼠标离开＃web按钮时它仍然保持不动。当鼠标关闭#web按钮和＃webdsn-drop时，如何让div消失当鼠标离开触发器并滑下内容时，如何编码滑下的内容以便滑动？

谢谢大家的帮助！

HTML：

<div id="navbar"> 
    <div id="nav-container"> 
     <h1>PORTFOLIO</h1> 
     <a href="#">Logo Design</a> 
     <a href="#">Business Cards</a> 
     <a id="pf" href="posters+flyers.html">Posters & Flyers</a> 
     <a id="web" href="#">Website Design</a> 
    </div> 
    </div> 

    <div id="webdsn-drop"> 
     <div id="border"> 
     <h1>WEBSITE DESIGN</h1> 
     </div> 

    </div> 

    <div id="pfdsn-drop"> 
     <div id="border"> 
     <h1>POSTERS & FLYERS</h1> 
     </div> 

    </div>

CSS：

#navbar { 
    width: 100%; 
    background-color: #fcfcfc; 
    overflow: auto; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    overflow: hidden; 
    z-index: 10; 

} 

#nav-container { 
    max-width: 950px; 
    min-width: 745px; 
    margin: 0 auto; 


} 

#nav-container h1 { 
    float: left; 
    margin: 0 auto; 
    padding-top: 10px; 
    font-family: "calibri light"; 
    font-size: 25px; 
    letter-spacing: 0.3em; 
    margin-left: 5px; 
    transition: color 0.3s ease; 

} 

#nav-container a { 
    float: right; 
    display: block; 
    padding: 15px 15px; 
    text-decoration: none; 
    color: black; 
    font-family: "calibri light", sans-serif; 
    font-size: 18px; 
    transition: background-color 0.5s ease; 

} 

#nav-container a:hover { 
    background-color: #f4f4f4; 
    transition: background-color 0.5s ease; 
} 

#nav-container a:active { 
    background-color: #bfbfbf; 
} 

#nav-container h1:hover { 
    color: #aaaaaa; 
    transition: color 0.3s ease; 
} 

/*-----------WEB-DESIGN-DROP---------*/ 

#border{ 
    width: 950px; 
    margin: 0 auto; 
} 

#border h1{ 
    position: absolute; 
    border: solid; 
    border-color: white; 
    border-width: 1px; 
    display: inline; 
    padding: 10px 20px; 
    border-radius: 10px; 
} 


#webdsn-drop{ 
    background-color: #3f3f3f; 
    margin-top: 50px; 
    width: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 9; 
    font-family: 'calibri light'; 
    font-size: 12px; 
    letter-spacing: 5px; 
    height: 400px; 
    color: white; 
    display: none; 
}

JQUERY：

$(document).ready(function(){ 
    $('#web').hover(function() { 
    $('#webdsn-drop').slideDown(); 
}, function() { 
    $('#webdsn-drop').mouseleave(function(){ 
    $('#webdsn-drop').slideUp(); 
    }); 
}); 



});

来源

2017-06-29 AbuN2286

试试吧

我增加了行$（ '＃网络'）悬停（）为了使就没有。重复打开多次悬停

$(document).ready(function() { 
      $('#web').hover(function() { 
       if ($('#webdsn-drop').is(":hidden")) { 
        $('#webdsn-drop').slideDown(); 
       } 
      }, function() { 

        $('#webdsn-drop').slideUp(); 
      });

来源

2017-06-29 15:15:40

我试过这个，但滑动下来的内容不停留，当moise移动到它，它已帮助导航按钮部分，但我想滑下来的内容保持滑下来，直到鼠标也走了 – AbuN2286

在我看来，你想添加一个鼠标离开侦听器时该事件已经被被解雇。

试试这个：

$(document).ready(function(){ 
 
    $('#web').hover(function() { 
 
    $('#webdsn-drop').slideDown(); 
 
    }, function() { 
 
    $('#webdsn-drop').slideUp(); 
 
    }); 
 
});

来源

2017-06-29 15:06:12 marwils

提供的代码做的工作，但下滑内容不会停留在鼠标移动到滑下的内容后 – AbuN2286

我坐了很长一段时间，思考如何实现它，而它竟然这么歪，但是我完全相信有一个更好的实现

$(document).ready(function() { 

      let StatusHower = false; 

      $('#web').hover(function() { 
       if ($('#webdsn-drop').is(":hidden")) { 
        $('#webdsn-drop').slideDown(); 
       } 
      }, function() { 

       StatusHower = true; 

       $('#webdsn-drop').hover(function() { 
        StatusHower = false; 
       }, function() { 
        $('#webdsn-drop').slideUp(); 
        }); 


       setTimeout(function() { 
        if (StatusHower) { 
         $('#webdsn-drop').slideUp(); 
         StatusHower = !StatusHower; 
        } 
       },100) 

       }); 
     });

来源

2017-06-30 07:58:07

当鼠标离开触发器并滑下内容时，如何编码滑下的内容以便滑动？

回答

相关问题