0

我在创建带有 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);
   }
);

每一个帮助表示赞赏！

4

1 回答 1

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);
   }
);

更新

更新了 JSFiddel 演示

height:25px;在.userBlock aCSS 中添加

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

于 2013-08-27T12:43:07.217 回答