0

当您将鼠标悬停在 #crm-userbar 上时，下拉菜单无法正常工作

那么这里是一个小提琴：http: //jsfiddle.net/pVVRn/

jQuery

 $(document).ready(function() {

     $("#crm-userbar").mouseover(function() {
         $(".dropdown").fadeIn();
     }).mouseout(function(){
         $(".dropdown").fadeOut();
     });

 });

CSS

.dropdown {
             position: absolute;
             top: 66px;
             right: 0; 
             background: #0098EA;
             font-weight: normal;
             width: 210px;
             padding: 12px 6px;
             margin: 0px 0px;
             z-index: 100;
             list-style: none;
         }

         .dropdown li a {
             color: #fff;
             width: 210px;
             padding: 12px 6px;
             margin: 0px 0px;
         }

         .dropdown li a:hover {
             display: block;
             text-decoration: none;
             color: #9e9e9e;
             padding: 10px 20px;
         }
4

3 回答 3

1

将下拉菜单放在 div 中并使用hover()

小提琴

于 2013-01-21T10:33:43.823 回答
1

此代码可以在一行中。

$("#crm-userbar").hover(function(){
   $(".dropdown").fadeToggle();
 });
于 2013-01-21T10:35:54.867 回答
0

你在这里需要的是..mouseenter()和mouseleave()

这是更新的 小提琴

$("#crm-userbar").mouseenter(function() {
             $(".dropdown").fadeIn();
         }).mouseleave(function(){
             $(".dropdown").fadeOut();
         });

“或者”

改为使用hover()。

$( "#crm-userbar" ).hover(function(){
   $(".dropdown").fadeIn();
},function(){
   $(".dropdown").fadeOut();
}

);

您可以通过此 链接mouseenter查看 和功能之间的真正区别mouseover ..

于 2013-01-21T10:31:19.817 回答