jQuery停止懸停（不工作）

我想在瀏覽器寬度小於768px時停止/取消在jQuery中創建的懸停效果。我嘗試過不同的方法，如.stop（）和.finish（），但他們都沒有工作。jQuery停止懸停（不工作）

這裏是我的代碼：

$(document).ready(function(){ 

var windowWidth = $(window).width() 

if (windowWidth >= 768) { 
    $('nav .drop-down').hover(
    function(){ 
    $('ul', this).stop().fadeIn(300); 
    }, 
    function(){ 
    $('ul', this).stop().fadeOut(300); 
    } 
); 
} else if (windowWidth < 768) { 
    $('nav .drop-down').finish(); 
} 

}); 


<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <!--Meta--> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!--Links--> 
    <link href="css/framework.css" rel="stylesheet" type="text/css" /> 
    <link href="css/main.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

    <nav> 
    <div class="row-full"> 
    <div class="position column-12"> 
    <img class="logo" src="img/XXS-Logo.png" alt="Logo" /> 
    <!--Mobile navigation--> 
    <div class="mobile"> 
     <i class="fa fa-bars" aria-hidden="true"></i> 
    </div> 
    <ul id="ul-main"> 
     <!--li--> 
     <li><a href="#">Home</a></li> 
     <!--li--> 
     <li><a href="#">About</a></li> 
     <!--li--> 
     <li class="drop-down"> 
     <a href="#">Lead generation</a> 
     <i id="lead-icon" class="fa fa-angle-down" aria-hidden="true"></i> 
     <ul id="lead-ul"> 
     <li><a href="#">Solar Panel Leads</a></li> 
     <li><a href="#">Home Improvement Leads</a></li> 
     <li><a href="#">Heat Pump Leads</a></li> 
     </ul> 
     </li> 
     <!--li--> 
     <li class="drop-down"> 
     <a href="#">Web Design</a> 
     <i id="web-icon" class="fa fa-angle-down one" aria-hidden="true"></i> 
     <ul id="web-ul"> 
     <li><a href="#">Responsive Web Design</a></li> 
     <li><a href="#">SEO</a></li> 
     <li><a href="#">Web Design</a></li> 
     </ul> 
     </li> 
     <!--li--> 
     <li class="drop-down"> 
     <a href="#">Marketing Campaigns</a> 
     <i id="marketing-icon" class="fa fa-angle-down" aria-hidden="true"></i> 
     <ul id="marketing-ul"> 
     <li><a href="#">Consumer Data</a></li> 
     <li><a href="#">PPC</a></li> 
     </ul> 
     </li> 
     <!--li--> 
     <li><a href="#">Clients</a></li> 
     <!--li--> 
     <li class="drop-down"> 
     <a href="#">Contact</a> 
     <i id="contact-icon" class="fa fa-angle-down" aria-hidden="true"></i> 
     <ul id="contact-ul"> 
     <li> 
     <a href="#">Careers with Watts Marketing</a> 
     <i id="contact-icon-sub" class="fa fa-angle-down" aria-hidden="true"></i> 
     <ul id="contact-ul-sub"> 
      <li><a href="#">Call Centre Jobs Norwich</a> 
     </ul> 
     </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
    </div> 
    </nav> 

    <!--Script--> 
    <script src="https://use.fontawesome.com/69bc4f0423.js"></script> 
    <script src="js/jquery-3.1.1.min.js"></script> 
    <script src="js/main.js"></script> 
</body> 
</html>

來源

2017-01-30 Alex Watts

只是想知道：爲什麼你想用jQuery解決這個問題，當你可以用CSS做到這一點？ –

您可以使用CSS媒體查詢，而不是jQuery。

@media only screen and (max-width: 768px) { 
    //hide hover effect here 
} 

@media only screen and (min-width: 768px) { 
    //perform hover effect here 
}

來源

2017-01-30 11:22:42 Praveen

你可以使用媒體查詢添加懸停效果。所以只有在需要時才添加。試試這個：

@media only screen and (min-width: 768px){ 
    nav .dropdown:hover 
    { 

    } 
}

來源

2017-01-30 11:15:40 kritikaTalwar

我可以，但懸停效果用來顯示下拉菜單。我不確定CSS可以做我需要的。懸停時使用 –

使您的下拉菜單可見 – kritikaTalwar

jQuery停止懸停（不工作）

回答

相關問題