Question

我在使用jquery mouseenter / mouseout效果创建菜单时遇到问题。我希望显示一个小图标，当用户将鼠标悬停在项目上时，它应该向左展开并显示菜单链接。

但它只适用于从下方而不是侧面鼠标悬停的情况。这真是奇怪的行为。

这是我的css：

.userBlock {
       display: inline;
       float: right;
    }

    .userBlock a {
       padding-left: 15px;
       line-height: 35px;
       text-decoration: none;
       cursor: pointer;
       color: rgba(0, 0, 0, 0.75);
       border-left: 1px solid rgba(0, 0, 0, 0.15);
       display: inline-block;
       font: bold 13px/36px "Helvetica Neue",Helvetica,Arial,sans-serif;
       width: 25px;
       overflow: hidden;
    }

    .userBlock a:last-child  {
       border-right: 1px solid rgba(0, 0, 0, 0.15);
    }

    .userBlock a span{
       margin-left: 15px;
    }

和我的HTML：

 <div class="userBlock">
       <a>
           <img src="../images/config.ico" />
           <span>Test</span>
       </a>
       <!-- .... -->   
 </div>

最后我的jquery：

// mouse over links
$('.userBlock a').mouseenter(
   function() {
      $(this).stop().delay(1).animate({'width':'100px'}, 500);
   }
);

// mouse leaves link
$('.userBlock a').mouseout(
   function() {
      $(this).stop().delay(1).animate({'width':'25px'}, 500);
   }
);

每一个帮助都表示赞赏！

Answer 1

使用

// mouse over links
$(document).on('mouseenter', ".userBlock a", function() {
      $(this).stop().delay(1).animate({'width':'100px'}, 500);
   }
);

// mouse leaves link
$(document).on('mouseleave', ".userBlock a", function() {
      $(this).stop().delay(1).animate({'width':'25px'}, 500);
   }
);

<强>更新

Updated JSFiddel Demo

在CSS

中向height:25px;添加了.userBlock a

未对齐文字和图片，因为这不是您的问题。

jQuery使用图像滑动菜单

1 个答案: