悬停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

回答

相关问题