Nos dois tutorias anteriores (aqui e aqui) aprendemos alguns efeitos básicos utilizando Jquery. A parte III do tutorial fará você mergulhar um pouquinho mais nesse ambiente.
O primeiro passo é criar uma lista com marcadores em seu arquivo HMTL que estávamos usando aqui. Utilize um id para essa lista e altere, no estilo, o marcador p para li. Exclua também o link que havíamos criado antes, afinal, não tem graça ver um efeito somente com cliques em botões e links, não é?
Assim, sua página terá o seguinte código:
E se parecerá com a imagem abaixo:
O que faremos dessa vez é adicionar uma classe para cada elemento da lista mas, ao invés de adicionar essa classe por um clique, faremos isso quando o usuário passar o mouse sobre a opção. Contudo, após o usuário retirar o mouse da opção, ela deverá voltar “ao normal”. Dica: para remover uma classe utilize o comando removeClass(“nome_da_classe”); E aí? conseguiu chegar lá?
Para resolver esse “problema” vamos alterar o nosso script:
[code language=”javascript”] $(document).ready(function() {$(“#Lista_de_opcoes li”).hover(function()
{
$(this).addClass(“newstyle”);
},
function(){ $(this).removeClass(“newstyle”);});
});
[/code]
Observe o negrito. Dessa vez, ao invés de informar a tag que seria alterada, eu passei o seu identificador precedido de #. Com isso, caso você crie outra lista em seu documento, com outro identificador, o script simplesmente será ignorado – faça o teste! O atributo li após o identificador me diz que o script deve ser aplicado à todas as tags li que se encontram dentro de Lista_de_opcoes. Caso você se esqueça de mencionar à qual tag será aplicada a formatação, o script tratará o identificador como uma div, alterando todos os atributos e elementos que estão ali dentro. Como estamos trabalhando com uma lista, a opção li é customizável: eu posso querer aplicar o estilo somente na primeira ou última opção, por exemplo. Para isso eu utilizaria li seguido de :last ou :first, por exemplo – faça o teste aqui também!
É importante ainda ressaltar a ordem que os comandos, ou functions , são escritos: Primeiro você atribui o estilo quando o mouse “passa por cima” – com o hover, e depois retira esse estilo.
Assim, o resultado final de sua página seria:
Aguarde o próximo tutorial : essa série ainda tem mais dois capítulos! 🙂
