CODEWITHSUNDEEP
javascriptjquery
user1171053
user1171053

Reputation:

jQuery not adding Background Image

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;

Upvotes: 2

Views: 1367

Answers (5)

elclanrs
elclanrs

Reputation: 94101

Why are you using jQuery for this? This can be accomplished with simple css.

Then, you're using too many !important which shouldn't be set with jQuery anyway. Try to get rid of those and organizing your css in a better way.

Take a look at http://jonrohan.me/guide/css/creating-triangles-in-css/.

If you want easing, then just create a div, style the arrow with css, hide the div and show it with jQuery.

Can you provide a jsfiddle also so it's easier to see what you're trying to accomplish?

Upvotes: 0

Sagar Patil
Sagar Patil

Reputation: 1948

You should ideally put all your CSS in a single line of code like you have in your hover out function:

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

        $(this).css({'padding':'10px 0', 'background':'url(/path/to/image/small_white_arrow.png) no-repeat 25px 8px #000000'});
    },
    function(){
        $(this).css('background', 'none');
    });

You should also check the path to the image - relative and absolute - and see if it's getting picked up. Also, since you're not using animations or transition effects, why not just do this using CSS?

.sub-menu a{
    background:none;
}

.sub-menu a:hover{
    background:url(/path/to/image/small_white_arrow.png) no-repeat 25px 8px #000000;
}

Upvotes: 0

Nick Lockwood
Nick Lockwood

Reputation: 40995

I think the !importants are the problem. If you look, none of the styles marked important are being set.

I'd suggest defining css classes in your stylesheet for this and adding the removing the class name using jQuery instead of setting the style directly.

By the way, you can substantially improve the performance of your code by combining these kind of jQuery calls into one call, like this:

$(this).css({
    'padding-top': '10px',
    'padding-bottom': '10px',
    'background-color', 'black',
     ...etc
});

Upvotes: 0

Brigand
Brigand

Reputation: 86220

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.

Upvotes: 1

Salil
Salil

Reputation: 536

Can you please try this using a local image ? Try to give relative path of the image instead of the whole URL.

Upvotes: 1

Related Questions