懸停jQuery

我有一個菜單。懸停時，我需要添加字母間距樣式。懸停jQuery

菜單：

<ul class="whitedropdown-menu"> 
     <li class="disabledMenu"><a class="ng-binding">Menu 1</a></li> 
     <li class="disabledMenu"><a class="ng-binding">Menu 2</a></li> 
     <li class="activemenu"><a class="ng-binding">Menu 3</a></li> 
     <li class="activemenu"> 
      <div class="icon"><i class="fa ico"></i></div> 
      <a href="javascript:void(0)">Menu 4</a> 
     </li> 
    </ul>

jQuery代碼：檢測MAC鉻和功能懸停

if(navigator.platform.toLowerCase().indexOf('mac') > -1 && navigator.userAgent.indexOf('Chrome') > -1) 
    { 
     $(".whitedropdown-menu > li.activemenu").hover((function() { 
      $(this).find("a").css("letter-spacing", "-1px"); 
     }), function() { 
      $(this).find("a").css("letter-spacing", "0px"); 
     }); 
    }

它不能正常工作。當我在菜單3上懸停時，它工作正常。但是，當我懸停在菜單4上時，菜單3正在受到影響。我該如何解決這個問題？

請幫幫忙，謝謝

來源

2014-09-25 Erma Isabel

使用'$（「whitedropdown菜單> li.activemenu」）對（'的mouseenter '，function（）{...}）;'而不是懸停 – T00rk 2014-09-25 07:47:17

@Anton當我複製並粘貼代碼到stackoverflow時發生了這種情況。我也有一個同名的課程 – 2014-09-25 08:02:02

我在Mac上使用Chrome和你的標記/ JavaScript工作很好。 http://jsfiddle.net/jpattishalljr/c9bbowos/有更多的CSS？ – Jack 2014-09-25 08:11:01

這可能會幫助，檢查出來：

<script> 
    $("#whitedropdown-menu > li.activemenu").mouseenter(function() { 

     $(this).find("a").css("letter-spacing", "-1px"); 

    }).mouseleave(function() { 

     $(this).find("a").css("letter-spacing", "0px"); 

    }); 
    </script>

來源

2014-09-25 08:14:04

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>ThisTest</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<style> 
    ul{list-style-type: none} 
    ul ul{display: none} 
    ul ul ul{display: none} 

</style> 
<script> 
$(document).ready(function(){ 

$("ul li").click(function(){ 
    var myClass = $(this).attr("class"); 

    if(typeof myClass == 'undefined'){ 
     $(this).attr("class","active"); 
    $(this).siblings().find("ul").css("display","none"); 

    $(this).find("ul").css("display","block"); 
    $(this).find("ul").find("ul").css("display","none"); 
    event.stopImmediatePropagation(); 

    }else{ 
     if(myClass == 'active'){ 
     $(this).attr("class","inactive"); 
       $(this).siblings().find("ul").css("display","none"); 

    $(this).find("ul").css("display","none"); 
    $(this).find("ul").find("ul").css("display","none"); 
    event.stopImmediatePropagation(); 

     }else{ 
      $(this).attr("class","active"); 
       $(this).siblings().find("ul").css("display","none"); 

    $(this).find("ul").css("display","block"); 
    $(this).find("ul").find("ul").css("display","none"); 
    event.stopImmediatePropagation(); 
     } 
    } 
}); 


}); 
</script> 
</head> 

<body> 

<ul> 
    <li><a>India</a> 
    <ul> 
     <li><a>Sachin</a> 
      <ul> 
       <li><a>Batting</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
       <li><a>Bowling</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a>Dravid</a> 
      <ul> 
       <li><a>Batting</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
       <li><a>Bowling</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a>Saurav</a> 
      <ul> 
       <li><a>Batting</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
       <li><a>Bowling</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
      </ul></li> 
    </ul> 
    </li> 
    <li><a>Australia</a> 
    <ul> 
     <li><a>Ponting</a> 
      <ul> 
       <li><a>Batting</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
       <li><a>Bowling</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
      </ul></li> 
     <li><a>Steve</a> 
      <ul> 
       <li><a>Batting</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
       <li><a>Bowling</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
      </ul></li> 
     <li><a>Clarke</a></li> 
    </ul> 
    </li> 
    <li><a>South Africa</a> 
     <ul> 
      <li><a>Croze</a></li> 
      <li><a>Smith</a></li> 
      <li><a>Cock</a> 
       <ul> 
       <li><a>Batting</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
       <li><a>Bowling</a> 
        <ul> 
        <li><a>Tests</a></li> 
        <li><a>ODI</a></li> 
        <li><a>T20</a></li> 
        </ul> 
       </li> 
      </ul></li> 

     </ul> 
    </li> 
</ul> 
</body> 
</html>

來源

2017-01-05 05:32:16

最好在代碼中包含一些上下文/解釋，因爲這會使OP對未來的讀者更有用。 – EJoshuaS 2017-01-05 05:39:54

關注@ EJoshuaS的評論，請參閱StackOverflow上的[如何寫出一個好答案]（http://stackoverflow.com/help/how-to-answer）。 – jacefarm 2017-01-05 05:41:40

這段代碼是否與問題有關？問題在於調整'letter-spacing'，但代碼中沒有'letter-spacing'。 – Pang 2017-01-05 05:59:01

回答

相關問題