Botão com efeito ao ativar

[Rafaeloliveiraz 0]

Olá pessoal,

 

Estou com uma dúvida em um Slider que estou editando.

 

Segue modelo:

 

http://www.nefux.com/demo

 

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.

[Hocrux 2]

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.

[Rafaeloliveiraz 0]

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:

http://www.nefux.com/demo/

 

Desde já muito obrigado.

[Hocrux 2]

no css:

 

.active{ background:color; color:#suacor; }

 

função hover(){

this.addClass("active");

}

 

Isso é só um exemplo