Passe o mouse sobre um elemento usando CSS embutido

Este tutorial irá apresentar alguns métodos para passar o mouse sobre um elemento usando CSS embutido.

Use os eventos JavaScript onMouseOver e onMouseOut para criar um efeito de flutuação usando CSS embutido

É fácil aplicar o efeito de foco a um elemento ao usar um CSS externo. Por exemplo, podemos alcançá-lo conforme mostrado a seguir:

a{
 color:red;
}
a:hover{
 color:blue;
}

Quando movemos o mouse para o elemento a, a cor vermelha muda para azul.

Aqui, usamos o seletor :hover para selecionar o elemento de nossa escolha. Mas, não podemos escrever o seletor :hover em CSS embutido.

É porque o CSS inline suporta apenas os estilos, então não nos permite escrever o seletor. Mas, ainda podemos simular o efeito de foco usando CSS embutido.

Para isso, precisamos usar os eventos JavaScript onMouseOver e onMouseOut. O evento onMouseOver será executado quando movermos o ponteiro do mouse sobre um elemento.

Da mesma forma, o evento onMouseOut será executado quando movermos o ponteiro do mouse para fora de um elemento. Podemos usar esses eventos como um atributo da tag âncora e definir a cor do texto.

Por exemplo, podemos definir uma cor quando o mouse é movido sobre o texto usando o evento onMouseOver e definir outra cor usando o evento onMouseOut. Podemos usar a palavra-chave this para invocar as propriedades style e color e, em seguida, atribuir uma cor.

Por exemplo, crie uma tag âncora com o texto Click Here e use o evento onMouseOver como um atributo da tag âncora. Defina seu valor como this.style.color e forneça o código de cor #f00 e o código de cor #000 para o evento onMouseOut.

Quando movemos o mouse sobre o texto Click Here, a cor muda para vermelho. E, quando removemos o mouse do texto, a cor muda para preto.

Dessa forma, podemos usar os eventos JavaScript para simular o efeito de foco usando o CSS embutido.

Código de exemplo:

<a href="#"
 onMouseOver="this.style.color='#f00'"
 onMouseOut="this.style.color='#000'" >
 Click Here
</a>