jQuery sliding Menu with Images

Question

I have a problem creating a menu with jquery mouseenter / mouseout effects. I want to have a small icon displayed and when the user hovers over the item it should expand to the left and show the menu link.

But it only works when you mouse over from down below but not from the side. its really weird behaviour.

Here is my 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;
    }

and my html:

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

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

every help is appreciated !

Answer 1

Use on

// 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

Added height:25px; to .userBlock a in CSS

Aligning the text and image is not done as this is not your question.