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

[fernandotholl 19]

Bom dia pessoal,

 

novamente, mesmo layout, novos problemas, hoje o que está acontecendo é o seguinte, tenho um menu drop-down, fiz ele com jQuery do Zero, porém o mesmo possui alguns erros que não consigo resolver, vejam a descrição do problema:

 

Ao passar o Mouse sobre a <li> do elemento pai:

 

Ao passar o Mouse sobre as <li> do elemento filho:

(A <li> do elemento pai perde o efeito css ul li:hover)

 

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 */ })

 

Vejam como está o meu código:

 

HTML:

<div id="menu">
               <ul class="itens-menu">
                   <li><a href="index.html" title="Página Inicial" class="home"><img src="imagens/home-mini.png" alt="Página Inicial" /> Página Inicial</a></li>
                   <li>
                       <a href="interna.html" title="Consulta"  class="consulta"><img src="imagens/consulta-mini.png" alt="Consulta" /> Consulta</a>
                       <ul>
                           <li><a href="interna.html" title="Fórum">Sub-menu 1</a></li>
                           <li><a href="interna.html" title="Fórum">Mais um menu</a></li>
                           <li><a href="interna.html" title="Fórum">Outro Sub-menu </a></li>                        
                           <li><a href="interna.html" title="Fórum">Sub-menu 4</a></li>
                       </ul>
                   </li>
                   <li><a href="interna.html" title="Fórum"  class="forum"><img src="imagens/forum-mini.png" alt="Fórum" /> Fórum</a></li>
                   <li><a href="interna.html" title="Eventos"  class="eventos"><img src="imagens/eventos-mini.png" alt="Eventos" /> Eventos</a></li>
                   <li><a href="interna.html" title="Multimídia" class="multimidia"><img src="imagens/multimidia-mini.png" alt="Multimídia" /> Multimídia</a></li>
                   <li><a href="interna.html" title="Sistemas" class="sistemas"><img src="imagens/sistemas-mini.png" alt="Sistemas" /> Sistemas</a></li>
               </ul>
           </div>   

 

CSS:

#menu{
   margin: -11px auto 0 auto;
   width: 1024px;
   height: 35px;
   padding: 0 0 0 0;
}

#menu ul{
   list-style: none;
   position:relative; 
   z-index:2; 
}

#menu ul li{
   display: inline; 
   cursor: pointer;
   margin: 0 0 0 0;
   list-style: none; 
   float:left;
}

#menu ul li a{
   display:block;
   color: #FFFFFF;
   float:left;
   padding: 10px 15px 0 15px;
   margin: 0 0 0 0;
   height:26px;
}

#menu ul a:hover{ color: #1C5A8C; background: url('../imagens/menu-bg-hover.jpg') repeat-x;}
#menu ul .home img{ float:left; margin: 3px 6px 0 0;}

/* Sub-menu */
#menu ul li ul{    
   top:35px;
   width: 150px;
   padding: 0 0 0 0;
   margin: 0 0 0 0;
   background-color: #EBEBEB;
   border:solid 1px #E2E2E2;
   float:left;
   position:absolute;
   z-index:1;
}

#menu ul li ul li{
   float:none;
   background: url('../imagens/menu-bg-hover.jpg') repeat-x;
   display:block;
   width: 150px;
}

#menu ul li ul li a{
   color: #1B598C;
   width: 120px;
}

 

JavaScript:

/* Menu Principal */    
   $("#menu ul li ul").hide();    
   $("#menu ul li").hover(
function(){
           $(this).find("ul:first").slideDown("slow");

       },
function(){
           $(this).find("ul:first").slideUp("slow");

       }
   );     

 

Se alguem conseguir me ajudar nessa solução ficaria muito grato.

 

Att.

[William Bruno 1501]

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.

[Diego L.L. 2]

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

[fernandotholl 19]

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

 

 

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.

[Diego L.L. 2]

@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'
});

[fernandotholl 19]

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.