[Resolvido] Trocar Background apenas na <li> do elemento

>
O que eu preciso: Ao tirar o mouse da <li> do elemento pai e comecar a passar sobre as <li> filhas, o background da <li> pai continuar branca (Fica branca com CSS ul li:hover { / CSS aqui / })

hum... isso você tem como resolver apenas com css :lol:

veja:

#menu ul a:hover{ color: #1C5A8C; background: url('../imagens/menu-bg-hover.jpg') repeat-x;}

é isso que está impacando a tua implementação.

se você estivesse alterando o background do LI e não do A, o próprio css resolveria =)

afinal, passar o mouse num filho é passar o mouse no pai.

Cara você vai ter que alterar o CSS da <li> pai via javascript quando o mouse estiver sobre a <li> filho...

Acho que o script ficaria próximo do abaixo:

$(function() {
$("#menu ul li").find("ul:first").find('li').on('mouseover', function() {
	$(this).closest('li').css({/* Seu CSS da <li> ativada */});
}).on('mouseout', function() {
	$(this).closest('li').css({/* Seu CSS da <li> desativada */});
});
});

Obs:

1 - Se você estiver usando a biblioteca jquery em uma versão inferior a 1.7 altere o método on() para bind()

2 - A própria documentação da biblioteca jquery não recomenda o uso do método hover(), é aconselhável que se use os eventos mouseover e mouseout separadamente mesmo que hover pareça mais simples ele perde em questão de desempenho e existe a chance deste se tornar obsoleto em futuras versões da biblioteca

@Willian, sim, eu entendo, só que refazer esse menu agora está um pouco inviável.

@Diego L.L. O Background trocou perfeitamente, porém tenho mais um único problema, veja na imagem abaixo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/erro4.jpg&key=791528d89db7984fe5d700f1a5297f0079b645ffbe7dcc928fbd66f95144bf6a" alt="erro4.jpg" />

O Background trocou, porém o texto eu não consigo trocar. Veja como ficou meu código:

$("#menu ul li ul").hide();
 $("#menu ul li").hover(
function(){
 $(this).find("ul:first").slideDown(600);
 $(this).closest('li').css({ 'background' : 'url("imagens/menu-bg-hover.jpg")', 'background-repeat' : 'repeat-x', 'color' : '#000'});
 },
function(){
 $(this).find("ul:first").slideUp(600);
 $(this).closest('li').css({'background' : 'none', 'color' : '#FFF'});
 }
 );

 

Eu consigo voltar o background, pois o mesmo está na <li>, porém como a cor do link eu defino na âncora, eu não consigo trocá-la. E Detalhe, preciso trocar somente a do elemento pai, pois todos eu até consigo.

Se alguem conseguir me ajudar nisso também seria muito grato.

@fernandotholl não tenho certeza, não deu pra testar, mas acredito que o problema seja o seguinte:

Você está referenciando a <li> pai e trocando o background, porém nós queremos trocar o atributo color do link e não da <li>.

Acredito que acrescentando algo proximo disso já resolva:

// Procura o elemento <a> filho do elemento <li> pai e altera sua cor
$(this).closest('li').find('a').css({
color : '#000'
});

Diego, deu certo, porém tiver que realizar uma correção

Primeiro, veja como ficou o JavaScript:

/ Menu Principal /

 $("#menu ul li ul").hide();
 $("#menu ul li").hover(
function(){
 $(this).find("ul:first").slideDown(600);
 $(this).closest('li').css({ 'background' : 'url("imagens/menu-bg-hover.jpg")', 'background-repeat' : 'repeat-x'});
 $(this).closest('li').find('a:not(.sub)').css({'color' : '#1C5A8C'});
 },
function(){
 $(this).find("ul:first").slideUp(600);
 $(this).closest('li').css({'background' : 'none'});
 $(this).closest('li').find('a:not(.sub)').css({'color' : '#fff'});
 }
 );

Agora no menu, eu tive que adicionar uma class com o nome sub nas âncoras em que eu não queria trocar a cor, ai eu utilizo o seletor not().

Veja meu HTML:

<div id="menu">
 <ul class="itens-menu">
 <li><a href="#home" title="Página Inicial" class="home" name="link"><img src="imagens/home-mini.png" alt="Página Inicial" /> Página Inicial</a></li>
 <li>
 <a href="#consulta" title="Consulta" class="consulta" name="link"><img src="imagens/consulta-mini.png" alt="Consulta" /> Consulta</a>
 <ul>
 <li><a href="#consultaMateriais" title="Materiais OPMES" class="sub">Materiais OPMES</a></li>
 <li><a href="#consultaFornecedores" title="Fornecedores" class="sub">Fornecedores</a></li>
 <li><a href="#consultaFabricantes" title="Fabricantes" class="sub">Fabricantes</a></li>
 </ul>
 </li>
 <li>
 <a href="#cadastro" title="Consulta" class="sistemas" name="link"><img src="imagens/consulta-mini.png" alt="Consulta" /> Cadastro</a>
 <ul>
 <li><a href="#cadastroMateriais" title="Materiais OPMES" class="sub">Materiais OPMES</a></li>
 <li><a href="#cadastroFornecedores" title="Fornecedores" class="sub">Fornecedores</a></li>
 <li><a href="#cadastroFabricantes" title="Fabricantes" class="sub">Fabricantes</a></li>
 <li><a href="#cadastroMarcas" title="Marcas" class="sub">Marcas</a></li>
 <li><a href="#cadastroDivisoes" title="Divisões" class="sub">Divisões</a></li>
 </ul>
 </li>
 <li><a href="#forum" title="Fórum" name="link" class="forum"><img src="imagens/forum-mini.png" alt="Fórum" /> Fórum</a></li>
 <li><a href="#eventos" title="Eventos" name="link" class="eventos"><img src="imagens/eventos-mini.png" alt="Eventos" /> Eventos</a></li>
 <li><a href="#multimidia" title="Multimídia" name="link" class="multimidia"><img src="imagens/multimidia-mini.png" alt="Multimídia" /> Multimídia</a></li>
 <li><a href="#sistemas" title="Sistemas" name="link" class="sistemas"><img src="imagens/sistemas-mini.png" alt="Sistemas" /> Sistemas</a></li>
 </ul>
</div>

CSS não precisei mudar nada.

Obrigado a ajuda de todos.