2

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;
Improve this question
2
  • Try with double quotes around the URL of the image? Commented Feb 4, 2012 at 3:30
  • you can put all of these in a CSS :hover like .sub-menu a:hover or use classes and jQuery .addClass() Commented Feb 4, 2012 at 3:34

5 Answers 5

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

well i need the !important for this in css, it wont work in css without the !important and when i thaught i tryed this already but i guess not because now i removed all 3 !important and it worked thanks!
1

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

Improve this answer

1 Comment

actaully is ls local LOL "127.0.0.1" is my local server i was not sure if jquery what kind of ralative path jquery needs i started with "nico/small_arrow_white.png" that worked in css and NOT in jquery
0

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
});
Improve this answer

Comments

0

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;
}
Improve this answer

Comments

0

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?

Improve this answer

3 Comments

seems like a lot of overrides
i actually expained why i use jquery for this. Learn to read!
U asked why i use jquery for this, because you not read. this has nothing to do with your solution (if its "better" or not). you simply had not read and you dont admit it. it would take me some time to figure out how to make a css arrow like this and i for sure dont want to store that lots of css in a css fiel for users to load when i actaually only want users with javascript enabled to see it. so your "better" sololution is not better for this. i can use image data in embedded into css and i guess i will. its faster and easyer that then css triangles. its nice and impressive anyway

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.