Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal,
Estou com uma dúvida em um Slider que estou editando.
Segue modelo:
Como vocês podem ver, ao lado difeito estão os Botões que ativam o Slide ao passar o mouse, e quando o mouse está sobre o botão ele troca a imagem e por outra.
<a href="#"><img src="./images/Compensa_future_button_off_EST.JPG" onmouseover="this.src='./images/Compensa_future_button_on_EST.JPG';" onmouseout="this.src='./images/Compensa_future_button_off_EST.JPG';"/></a>
Um efeito simples, apenas troca a imagem.
Porém eu preciso que a imagem fique ativa de acordo com o slide em exibição, preciso que ao passar o mouse ele mantenha o botão ativo até que outro seja selecionado.
Os arquivos do site estão aqui caso alguém queira dar uma olhada:
http://www.nefux.com/demo/demo.zip
Tentei fazer utilizando CSS com o a:active porém como as imagens são diferentes para cada botão estou em dúvida de como fazer.
Alguém pode me ajudar?
Muito obrigado.
Olá Mauro,
Você pode me dar um exemplo de como ficaria no css?
Porque o efeito de ativar o Slide funciona apenas passando o mouse por cima, não precisa clicar...
Nesse caso as imagens seriam diferentes nos 5 botões... Tanto a padrão quanto a que fica ativada.
Se tiver alguma dúvida olha no link abaixo o modelo:
Desde já muito obrigado.
no css:
.active{ background:color; color:#suacor; }
função hover(){
this.addClass("active");
}Isso é só um exemplo
Eu não entendi bem, mas na própria função do hover você faz isso, só aplicar um css quando ele for selecionado, usa alguma classe, por exemplo, .active, quando passar o mouse ele adiciona essa class, ai quando passar por outro botão, remove a class desse e passa pro outro.