Colocar el cursor sobre un elemento usando CSS en línea

Este tutorial presentará algunos métodos para desplazar un elemento usando CSS en línea.

Utilice los eventos de JavaScript onMouseOver y onMouseOut para crear un efecto de desplazamiento mediante CSS en línea

Es fácil aplicar el efecto de desplazamiento a un elemento mientras se usa un CSS externo. Por ejemplo, podemos lograrlo como se muestra a continuación:

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

Cuando movemos el ratón al elemento a, el color rojo cambia a azul.

Aquí, hemos utilizado el selector :hover para seleccionar el elemento de nuestra elección. Pero no podemos escribir el selector :hover en CSS en línea.

Es porque el CSS en línea solo admite los estilos, por lo que no nos permite escribir el selector. Sin embargo, todavía podemos simular el efecto de desplazamiento mediante CSS en línea.

Para eso, necesitamos usar los eventos JavaScript onMouseOver y onMouseOut. El evento onMouseOver se ejecutará cuando movamos el puntero del mouse sobre un elemento.

De manera similar, el evento onMouseOut se ejecutará cuando movamos el puntero del mouse fuera de un elemento. Podemos usar estos eventos como un atributo de la etiqueta de anclaje y establecer el color del texto.

Por ejemplo, podemos establecer un color cuando el mouse se mueve sobre el texto usando el evento onMouseOver y establecer otro color usando el evento onMouseOut. Podemos usar la palabra clave this para invocar las propiedades de style y color y luego asignar un color.

Por ejemplo, cree una etiqueta de anclaje con el texto Click Here y utilice el evento onMouseOver como atributo de la etiqueta de anclaje. Establezca su valor en this.style.color y proporcione el código de color #f00 y proporcione el código de color #000 al evento onMouseOut.

Cuando movemos el mouse sobre el texto Click Here, el color cambia a rojo. Y, cuando quitamos el mouse del texto, el color cambia a negro.

De esta manera, podemos usar los eventos de JavaScript para simular el efecto de desplazamiento usando el CSS en línea.

Código de ejemplo:

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