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>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn