Rollover hover on link

Question

I made hover on link with css, now i try to do with jquery, but i fails. Somebody can explain how use on link? Or show example?

HTML:

<div id="nav_virsus">
    <ul>
        <li><a href="#"><img src="images/pagrindinis.png" alt="Pagrinidnis" /></a></li>
        <li><a href="#"><img src="images/forumas.png" alt="Forumas" /></a></li>
        <li><a href="#"><img src="images/unban.png" alt="Atsibaninti" /></a></li>
        <li><a href="#"><img src="images/banai.png" alt="Banai" /></a></li>
    </ul>
</div>

CSS:

#nav_virsus li a 
{
    color:#b8d9ff;
    text-decoration:none;
    padding:20px 5px 20px 5px;
}

#nav_virsus li a:hover
{
    background:url(../images/hover.png) repeat-x;
    color:#000;
    text-decoration:none;
    padding:21px 5px 20px 5px;
}

jquery:

$(document).on('mouseenter', 'img.a', function() {
  console.log('mouseenter');
  $(this).parent().next().find('.b').stop().animate({"opacity": "1"}, 600);
});

$(document).on('mouseleave', 'img.a', function() {
  console.log('mouseleave');
  $(this).parent().next().find('.b').stop().animate({"opacity": "0"}, 500);
});

Answer 1

With JQuery, use the syntax: $([selector]).mouseover([function]); and $([selector]).mouseout([function]);. Like:

$("a img").mouseover(function() {
  console.log('mouseenter');
  $(this).parent().next().find('.b').stop().animate({"opacity": "1"}, 600);
});

Answer 2

Just make right selector:

$('.a').on('mouseenter', function(e){
    //do stuff
})

$('.a').on('mouseleave', function(e){
    //do other stuff
})

Working Fiddle