Featured Posts

Hands-on HTML 5 2010 O desenvolvimento web está passando por mais uma mudança, evoluindo para acompanhar o ritmo dos negócios e sistemas das grandes empresas baseadas em web, como Google e Yahoo. Com os novos navegadores...

Read more

The Developer's Conference 2010 Esta é a 4a edição do The Developer's Conference, e a Globalcode reuniu toda sua rede de parceiros e profissionais para criar o evento mais completo do ano, sem perder a profundidade necessária...

Read more

Café com Browser 2010 Conversa sobre HTML5 é demanda que já se apresentava desde ano passado pelas organizações brasileiras filiadas ao W3C e por parceiros nas atividades do escritório, principalmente organizações...

Read more

Codeshow 2010 O Visie Codeshow é um evento num formato novo, em que não há palestras. Você vai assistir à construção de uma aplicação em um dia, a partir do zero, usando ferramentas como Git, HTML5, web2py...

Read more

Estrutura Básica de uma página XHTML/HTML Vamos falar sobre os elementos básicos para iniciar uma página HTML <!DOCTYPE> <html>    <head>       <title>          TiloWR       </title>    </head> <body></body> </html> <!DOCTYPE>...

Read more

Troca de Classe com JavaScript

Posted by Tilo | Posted in JavaScript, jQuery & Ajax, XHTML & CSS | Posted on 10-06-2009

Tags:,

3

A ideia é que uma div receba um efeito “Hover”, que só é aceito nos browsers superiores ao IE6:

Vamos usar esse HTML como Exemplo:

 <div id="btnSalvar" class="bt off" >Salvar</div>
 <div id="btnCancelar" class="bt off" >Cancelar</div>

Agora crie o CSS:

.bt {
width: 150px;
font: normal 12px/15px 'arial';
text-align: center;
text-decoration: none;
border: solid 1px black;
padding: 5px;
margin: 5px;
color: #fff;
}

.on { background-color: #006600; }
.off { background-color: #990000; }

pra garantir que ele tenho uma aparencia de botão, vou colocar a propriedade “cursor: pointer;” apenas para essa DIV que usaremos como Botão:

div.bt { cursor: pointer; }

o JavaScript entra agora para dar o efeito “Hover”

function LigaDesligaBotoes(botao) {
botao.className = botao.className == "bt off" ? "bt on" : "bt off";
}

pra finalizar basta chamar no Evento onmouseover=”" para quando o maouse está sobre a DIV e onmouseout=”" para quando o mouse sai da DIV:

<div id="btnSalvar" class="bt off" onmouseover="LigaDesligaBotoes(this);" onmouseout="LigaDesligaBotoes(this);" >Salvar</div>
<div id="btnCancelar" class="bt off" onmouseover="LigaDesligaBotoes(this);" onmouseout="LigaDesligaBotoes(this);" >Cancelar</div>

espero ter ajudado.

Exemplo Funcionando

Leia Também:

Comments (3)

Nossa.. Funciona perfeitamente, simples e prático pra um menu por exemplo.
Mas não dá pra explicar um pouquinho aquela parte do JS??

botao.className = botao.className == “bt off” ? “bt on” : “bt off”;

Muito bom o seu site!
Vlw! Abraço.

Pode deixar Felipe, Vou fazer um post só explicando como funciona o operador condicional ternário

Orbrigado pela Visita!

[...] meses atrás fiz um post sobre como fazer troca de classes com JavaScript, mas algumas pessoas não entenderam como funciona o Ternário, por isso resolvi escrever este [...]

Write a comment

Spam Protection by WP-SpamFree