Exibir apenas primeiro item da <li>

[MaiconCarlos 0]

Meu código:

 

<style type="text/css">
.delete { display: none }
</style>

 

 

<ul>
 <li>Categoria 1</li>
 <li>Categoria 2 <div class="delete">Deletar Categoria 2</div>
   <ul>
    <li>Sub Categoria 2 <div class="delete">Deletar >Sub Categoria 2</div></li>
   </ul>
 </li>

</ul>

 

 

<script type="text/javascript">
$(document).ready(function() {
jQuery('li').hover(function () {
   	  $(this)....
}, function () {
   	  $(this)....
});
});
</script>

 

Quando o hover estiver no Categoria 2 eu quero exibir apenas o Deletar Categoria 2, e assim por diante.

 

Tentei aqui usando vários modos mas ainda não tive sucesso, se alguém puder ajudar.

 

Abs

[mangakah 217]

Se você quer que apareça apenas o DIV, mas não o texto (exemplo "Sub Categoria 2") dentro do LI, você deve colocar este texto em um container, tipo SPAN, por exemplo e usar um evento onhover em li que executaria a ação de mostrar DIV.delete e esconder o SPAN (que pode até ser selecionado usando first-child).

[JCMais 75]

Você não precisa de Javascript (muito menos jQuery) para isso, apenas com CSS você resolve seu problema:

<ul>
 <li class="cat">Categoria 1</li>
 <li class="cat">Categoria 2 <div class="action-delete">Deletar Categoria 2</div>
   <ul>
    <li class="cat-sub">Sub Categoria 2 <div class="action-delete">Deletar >Sub Categoria 2</div></li>
   </ul>
 </li>
</ul>

 

Css:

.action-delete {
   display: none;
}
.cat:hover .action-delete {
   display: block;
}

[MaiconCarlos 0]

Você não precisa de Javascript (muito menos jQuery) para isso, apenas com CSS você resolve seu problema:

...

 

Verdade, você tem razão. Um detalhe;

 

<ul>
<li class="cat">Categoria 1 <div class="items-cat">Adicionar</div> </li>

   <li class="cat">Categoria 2 <div class="items-cat">Adicionar</div> 
   	<ul>
           <li class="sub-cat">Sub Categoria 2 <div class="items-sub-cat">Adicionar</div></li>
           <li class="sub-cat">Sub Categoria 2 <div class="items-sub-cat">Adicionar</div></li> 
           <li class="sub-cat">Sub Categoria 2 <div class="items-sub-cat">Adicionar</div></li>
           <li class="sub-cat">Sub Categoria 2 <div class="items-sub-cat">Adicionar</div></li>
       </ul>
   </li>

   <li class="cat">Categoria 3 <div class="items-cat">Adicionar</div> </li>
</ul>

 

 

.cat:hover .items-cat { display:block }
.sub-cat:hover .items-sub-cat { display:block }

.items-sub-cat,
.items-cat { float:right; display:none }

 

Quando o hover está em Sub Categoria 2 ele mostra o adicionar do item correspondente e também do Categoria 2, alguma sugestão para não mostrar o Adicionar do Categoria 2?

[JCMais 75]

Apenas com CSS não lembro nenhuma forma de fazer isso, aí você já teria que adicionar um pouco de Javascript.

 

Porém, até por questões de usabilidade, eu recomendaria deixar o adicionar da Categoria, mesmo quando estiver em uma Sub-Categoria, visto que, se eu entendi corretamente, o adicionar da Categoria adicionaria também todos as Sub-Categorias da mesma, ficaria melhor caso o usuário mudasse de ideia e quisesse adicionar todos os itens.

[MaiconCarlos 0]

Apenas com CSS não lembro nenhuma forma de fazer isso, aí você já teria que adicionar um pouco de Javascript.

 

Porém, até por questões de usabilidade, eu recomendaria deixar o adicionar da Categoria, mesmo quando estiver em uma Sub-Categoria, visto que, se eu entendi corretamente, o adicionar da Categoria adicionaria também todos as Sub-Categorias da mesma, ficaria melhor caso o usuário mudasse de ideia e quisesse adicionar todos os itens.

 

Sim, obrigado.

 

Aproveitando o tópico, vou postar um última dúvida, que, acredito ser bem simples para quem mexe direto com jquery;

 

$('li').hover(function () {
   	    $(this).next('div').css('background-color','#063');
}, function () {
          ////
       });

 

Porque o código acima não funciona? "teoricamente" ele não deveria pegar o item que teve o hover e "dentro" desse item procurar o próximo div e mudar a cor de fundo?

[JCMais 75]

Não.

 

O metódo .next pega o próximo elemento do DOM após o elemento selecionado, no seu caso ele iria pegar uma outra LI, mas como você passou um seletor (div) para ele, ele irá retornar nenhum elemento, porque não existe nenhum elemento DIV "junto" com a LI em questão.

 

Você deve ter algo assim:
<ul>
   <li>
   <li>
   <li>
</ul>

O que o seu código está buscando seria algo como:
<ul>
   <li>
   <li>
   <div>
</ul>    

 

Para pegar um outro elemento dentro do elemento que recebeu hover, você deve usar:

$( 'li' ).on( 'hover', function( event ) {

   $( this ).find( 'div' ); //procura pelo elemento DIV dentro da nossa LI

});

 

Detalhe que estou usando o metódo .on, presente nas versões mais recentes do jQuery (1.7+).