1

Queria por dois efeito no OnMouseOver para que ao passar o mouse em cima, o texto ficasse de uma cor e o fundo com outra cor. Estou usando este código

onmouseover="javascript: this.style.backgroundColor = 'Red'"

mas neste caso ele só muda o Background, como faço para adicionar outras propriedades???

Daria para criar um estilo em CSS para torna-lo padrão e utilizar onde eu quiser?

3 Respostas 3

3

Isso dá pra fazer fácil usando apenas o CSS caso prefira.

/* Código para dar o efeito da mudança de cor em 0.5 segundos. */
p {
  transition: all 0.5s;
}

/* código que faz mudar a cor para vermelho e background para verde */
p:hover {
  color: red;
  background-color: green;
}
<p>Texto de exemplo</p>

2
  • neste caso vc atribuiu ao parâmetro p, porém se eu quiser criar uma classe e atribuir em algumas DIVs por exemplo (não em todas) qual solução? eu tentei fazer .alteraCor{ transition: all 0.5s; } alteraCor:hover{ color: red; background-color: green; } Commented 12/11/2016 às 19:11
  • Funciona também, pode fazer essa classe desta forma que vai funcionar. Commented 17/11/2016 às 15:01
1

Você pode usar diversos outras propriedades como: Color, Visibility, display, border-color, width, height... entre outros. Sempre que uma propriedade for divida por espaço no css, por exemplo: "background-color e border-color" em javascript tem que estar juntas, a segunda palavra com a primeira letra maiuscula ficando assim: "backgroundColor e borderColor".

<form>
  E-mail: <input name="email" type="text" onmouseover="javascript: this.style.backgroundColor = 'Red'"><br>
   E-mail: <input name="email" type="text" onmouseover="javascript: this.style.display = 'none'"><br>
   E-mail: <input name="email" type="text" onmouseover="javascript: this.style.color = 'red'"><br>
  E-mail: <input name="email" type="text" onmouseover="javascript: this.style.visibility = 'hidden'"><br>
  E-mail: <input name="email" type="text" onmouseover="javascript: this.style.borderColor = 'red'"><br>
  E-mail: <input name="email" type="text" onmouseover="javascript: this.style.width = '50%'"><br>
  </form

1
  • Obrigado pela ajuda, mas eu queria atribuir 2 eventos no mesmo onmouseover, um que altere o fundo e outro que altere a cor da letra, como o exemplo do Laércio Lopes Commented 12/11/2016 às 19:13
0

Quem quiser mudar somente a cor do texto e não o fundo é so tirar o background e deixar o c minusculo: onmouseover="javascript: this.style.color='red'".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .