Grow your CSS skills. Land your dream job.

Odd hovering issue tab issue

  • # January 21, 2010 at 12:45 pm

    Right, I’m currently making a site, and for my navigation I would like to have a hover effect to give the user some feedback. My current method seems to work in webkit based browsers, but not in any others. I am using JQuery to do so, but I know it isn’t a JQuery problem, and so I’m sure it’s to do with the way in which Firefox and IE treat padding. Here is my code:

    Code:
    $(“li.nav-item”).hover(function(){ $(this).animate({ “padding-top”:”20px” }, 100) }, function(){ $(this).animate({ “padding-top”:”10px” }, 100) });

    I have tested the hover code by using alert boxes and I am sure that it works. Here is the URL of the sit: http://urbanmandesign.com/pk – as you can see if you are using Firefox for example it just doesn’t work! So basically what I’m looking for is the correct way to manipulate my CSS so that it works across all browsers.

    # January 22, 2010 at 12:31 pm

    I tested it on PC with XP Home and the hover effect doesn’t work in Firefox or IE7 and 8. Moreover in IE the rounded corners don’t show either. The effect only works in Safari and Chrome.

    Why don’t you use a simpler a:hover in the css.

    # January 22, 2010 at 1:34 pm

    Thanks for the reply, but I know the rounded corners don’t work, and the reason I am using JavaScript is because I want an animation.

    # January 23, 2010 at 1:26 pm

    Right, I’ve solved the issue, thanks anyways :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".