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

Выравнивание текста и изображения не выполняется, так как это не ваш вопрос.