當鼠標離開觸發器並滑下內容時，如何編碼滑下的內容以便滑動？

當鼠標離開這個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

當鼠標離開觸發器並滑下內容時，如何編碼滑下的內容以便滑動？

回答

相關問題