Question

当浏览器宽度小于768px时，我试图停止/取消在jQuery中创建的悬停效果。我尝试过不同的方法，例如.stop（）和.finish（），但它们都没有用。

这是我的代码：

$(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>

Answer 1

您可以使用媒体查询添加悬停效果。所以只在你需要的时候添加它。试试这个：

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

   }
}

Answer 2

您可以使用css media query而不是jquery。

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

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

jQuery停止悬停（不工作）

2 个答案: