Forums

sgobin

Hi,

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


<div id=\"nav\">
			<ul id=\"menu\">
				<li class=\"home\"><a href=\"index.html\"><span>Home</span></a></li>
				<li class=\"marcas\"><a href=\"marcas.html\"><span>Marcas</span></a></li>
				<li class=\"institucional\"><a href=\"institucional.html\"><span>Institucional</span</a></li>
				<li class=\"contato\"><a href=\"contato.html\"><span>Contato</span></a></li>
			</ul>
		</div>

And the CSS:


#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:


		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:


// 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


$(\"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

sgobin

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.

treehouse : what would you like to learn today?

Forums

Remove pure css background hover using jQuery?