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

UPDATE

Updated JSFiddel Demo

新增height:25px;到.userBlock a在CSS

調整文本和圖像沒有完成，因爲這不是你的問題。