Grow your CSS skills. Land your dream job.

Remove pure css background hover using jQuery?

  • # September 25, 2009 at 1:28 pm

    Hi,

    I have a html/css menu that change the background image with a:hover. The markup is:

    And the CSS:

    Code:
    #nav { height: 75px; width: 960px; background: #4274A1 url(../imagens/nav-bg.png) repeat-x top left; }
    ul#menu { float: left; margin: 14px 0 17px 18px; }
    ul#menu li { float: left; display: inline; position: relative; }
    ul#menu li a { display: block; height: 46px; float: left; text-indent: -9999px;}

    ul#menu li.home a { width:148px; background:url(../imagens/menu.png) 0 0; }
    ul#menu li.marcas a { width:159px; background:url(../imagens/menu.png) -148px 0; }
    ul#menu li.institucional a { width:176px; background:url(../imagens/menu.png) -307px 0; }
    ul#menu li.contato a { width:174px; background:url(../imagens/menu.png) -483px 0; }

    ul#menu li.home a:hover { width:148px; background:url(../imagens/menu.png) 0 46px; }
    ul#menu li.marcas a:hover { width:159px; background:url(../imagens/menu.png) -148px 46px; }
    ul#menu li.institucional a:hover { width:176px; background:url(../imagens/menu.png) -307px 46px; }
    ul#menu li.contato a:hover { width:174px; background:url(../imagens/menu.png) -483px 46px; }

    It’s working fine but I would like to have same animation in the menu. So I added some jQuery.

    First I added this CSS:

    Code:
    ul#menu li a span {
    display: block;
    height: 46px;
    width: 100%;
    z-index: 1000;
    position: absolute;
    background:url(../imagens/menu.png) 0 46px;
    visibility: hidden;
    }
    ul#menu li.marcas a span { background-position: -148px 46px; }
    ul#menu li.institucional a span { background-position: -307px 46px; }
    ul#menu li.contato a span { background-position: -483px 46px; }

    And then the JS:

    Code:
    // Anima os menus
    function animaMenu(){

    // define selector as variable
    var menuItens = $(“ul#menu li a span”);

    // turn on span visibility
    menuItens.css(“visibility”,”visible”);

    // and hide with jQuery
    menuItens.css(“opacity”,”0″);

    // animates
    menuItens
    //over
    .hover(function(){
    $(this).stop().animate({ opacity: 1 }, ‘normal’);
    },

    //out
    function(){
    $(this).stop().animate({ opacity: 0 }, ‘normal’);
    });
    };

    What I am trying to do is to have the animation but if js is disable to still have the hover effect with css only. Almost everything is working but I can’t disable the pure CSS hover effect so the animation apears. Here is where I am testing the site:
    http://www.santosrepresentacoes.com.br/site/

    As you can see the "out" state is working but the "over" state don’t appear because the CSS hover is taking place with it. I already tried to use

    Code:
    $(“ul#menu li a:hover”).css(“background”,”none”);

    But I think I can’t use :hover. I already tried "ul#menu li.home a:hover" ; "ul#menu li.home a" (this case works but I miss the "non over" state too.

    Anyone could help me? Maybe I am asking too much? I could just remove the pure css hover state in the style sheet but I think it’s can be done with jQuery.

    Thanks

    # September 30, 2009 at 6:35 am

    Hi, I found a solution with a plug-in called Blend from the same author of colorbox. Not the plug-in itself but the concept.

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

You must be logged in to reply to this topic.

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