Troca de Classe com JavaScript
Posted by Tilo | Posted in JavaScript, jQuery & Ajax, XHTML & CSS | Posted on 10-06-2009
Tags:CSS, JavaScript
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.
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 [...]