Onmouseover effect

Asked

Viewed 1,321 times

1

I wanted to put two effect on the Onmouseover so that when you hover the mouse over it, the text would be of one color and the background with another color. I am using this code

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

but in this case it only changes the Background, as I do to add other properties???

You could create a style in CSS to make it default and use it wherever I want?

javascript mouseover

3 answers

3


This can be done easily using only CSS if you prefer.

/* 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>

  • in this case you assigned the parameter p, but if I want to create a class and assign in some Divs for example (not in all) which solution? I tried to make .alteraCor{ Transition: all 0.5s; } alteraCor:Hover{ color: red; background-color: green; }

  • It works too, can make this class this way it will work.

1

You can use several other properties like: Color, Visibility, display, border-color, width, height... among others. Whenever a property is divided by space in css, for example: "background-color and border-color" in javascript has to be together, the second word with the first letter uppercase getting like this: "backgroundColor and 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

  • Thanks for the help, but I wanted to assign 2 events in the same onmouseover, one that changes the background and one that changes the color of the letter, as the example of Laércio Lopes

0

Who wants to change only the color of the text and not the background is just take the background and leave the c minusculo: onmouseover="javascript: this.style.color='red'".

Browser other questions tagged javascript mouseover

You are not signed in. Login or sign up in order to post.