Question

I have a problem i want to add a arrow on hover. i want to do this is javascript because i am using jquery easing as well (deactivated for this test) and if the user has no javascript it would be behind the linktext

anywas the padding and the background color works! but not the image? i dont get why. in css it works exactly like this!

//arrow
        $('.sub-menu a').hover( function(){

            $(this).css('padding-top', '10px');
            $(this).css('padding-bottom', '10px');
            $(this).css('background-color', 'black');
            $(this).css('background-image', 'url(http://127.0.0.1/wp-content/themes/nicores/nico/small_arrow_white.png) !important');
            $(this).css('background-repeat', 'no-repeat !important');
            $(this).css('background-position', '25px 8px !important');
        },
        function(){

            $(this).css('background', 'none');

        });

I get this from Firebug i dont know where “backgound: none … scroll” comes from

padding-top: 10px; padding-bottom: 10px; background: none repeat scroll 0% 0% transparent;

Answer 1

Like @elclanrs said, the !important shouldn’t be there. In fact, it’s what causes the problem. Try removing it.

Here’s a
simplified demo.