Alterar CSS de botão "SUBMIT" do <FORM> com JavaScript

20 de abril de 2013 5 respostas

LVentura 20 de abril de 2013

Olá.

Eu estou fazendo um trabalho de aula e gostaria de mudar o background-color do meu botão submit quando o mouse passasse por cima do botão submit.

vi muitas coisas na internet sobre isso mais nenhum deles ensinava como alterar o botão submit funções como getElementById acredito que não funcionariam
pois não tenho uma classe pro botão submit no css apenas isso:

input[type=submit] { background-color:#4D90FE !important; border: 1px solid transparent; }

e não sei de que forma eu conseguiria mudar o background desse input quando colocasse o mouse por cima do botão

por enquanto tenho isso:

Como eu posso referenciar o botão submit do meu form chamado “login” em JavaScript?

5 Respostas

AbelBueno 20 de abr. de 2013

Nos browsers mais atuais, o css dá suporte a alguns “eventos”.

Um deles é o hover, que é basicamente quando você passa o mouse por cima de um elemento.

No seu caso, tente:

input[type=submit]:hover { 
  ///seu css aqui
}

E veja se, nos browsers que quer suportar, funciona de acordo.

LVentura 20 de abr. de 2013

AbelBueno:
Nos browsers mais atuais, o css dá suporte a alguns “eventos”.

Um deles é o hover, que é basicamente quando você passa o mouse por cima de um elemento.

No seu caso, tente:
input[type=submit]:hover { 
  ///seu css aqui
}
E veja se, nos browsers que quer suportar, funciona de acordo.

valeeeeeeeeu funciono dirietinho esse :hover serve pra qualquer CSS?

AbelBueno 20 de abr. de 2013

Hoje em dia ele serve para qualquer elemento.

No IE, você precisa ter o doctype corretamente definido.

Mais informações aqui: http://www.w3schools.com/cssref/sel_hover.asp

LVentura 20 de abr. de 2013

Hoje em dia ele serve para qualquer elemento.

No IE, você precisa ter o doctype corretamente definido.

Mais informações aqui: http://www.w3schools.com/cssref/sel_hover.asp

meu doctype no momento é:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> estaria correto?

cyborgninja 26 de abr. de 2013

Legal também saber como as coisas funcionam, segue exemplo via js:

var botaoSubmit = document.getElementById('idBotao');

botaoSubmit.onmouseover = function() {

   this.style.backgroundColor = '#4D90FE !important'; // atenção no camelCase aqui, você usou -
   this.style.border = '1px solid transparent';

}

Como pode perceber os atributos de CSS manipulados pelo JS não podem conter hífen (-), pois isso gera erros no código, todo atributo como background-color deve ser declarado em camelCase (backgroundColor, fontFamily, paddingTop, etc).

Esse foi apenas um exemplo, sugiro realizar alguns testes pra ver se isso lhe atende.

Segue link interessante sobre o assunto:

http://www.linhadecomando.com/javascript/javascript-manipulando-propriedades-do-css

Espero ter ajudado.

Criado 20 de abril de 2013

Ultima resposta 26 de abr. de 2013

Respostas 5

Participantes 3

5 Respostas

Topicos relacionados