javascript - 带图像的 jQuery 滑动菜单

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

添加 height:25px; 到 CSS 中的 .userBlock a

对齐文本和图像没有完成，因为这不是你的问题。