I wanted two effects in OnMouseOver so that when you mouse over, the text is one color and the background is another color. I'm using this code
onmouseover="javascript: this.style.backgroundColor = 'Red'"
But in this case it just changes the Background, how do I add other properties ???
Would you like to create a style in CSS to make it default and use wherever I want?
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> You can use several other properties such as Color , Visibility , display , border-color , width , height ..., among others. Whenever a property is divided by space in the css, for example: " background-color and border-color " in javascript must be together, the second word with the first capital letter being: " 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>
</formIf you want to change only the color of the text and not the background, just remove the background and leave the minuscule: onmouseover="javascript: this.style.color = 'red'".