¿Cómo cambiar el color de enlace en vuelo estacionario con CSS?

En este artículo, vamos a aprender cómo cambiar el color enlace en vuelo estacionario con CSS ? En este caso, estamos creando una CSS para que podemos cambiar el aspecto de los enlaces cuando se cernían, es decir, el usuario coloca su ratón sobre él.

Los enlaces son comunes en cualquier página web. Los enlaces conectados entre sí da el nombre de hipertexto HTML. Hoy en día, en cada página web encontrará enlace que los enlaces a otra página, otro sitio web o URL. Uso de la CSS, podemos cambiar el aspecto de los enlaces cuando se cernían, es decir, el usuario coloca su ratón sobre él .

Puede ser útil para diferenciar entre los distintos tipos de enlaces, tales como enlace a wikipedia en diferente color y enlace a un sitio web de un color diferente. Definamos marcado class ella.

Código – HTML

<a> Normal Link </a>
<a class="special"> Cool Link </a>

En este código de marcado, tenemos dos enlaces. Un enlace dentro de la normalidad una etiqueta sin ningún for le aplica una y otra etiqueta con especial class aplica a ella. Vamos a utilizar este selector class para seleccionar este elemento en el CSS.

Código – CSS

a {
font-size: 16px;
font-family: serif;
color: black;
}
.special:hover {
color: red;
}

Primero vamos a definir algunas propiedades básicas como la fuente y el color que son class class cada un elemento . Se dirigirá a todas las etiquetas de enlace con o sin cualquier class especial. Con el fin de diferenciar el enlace especial del otro acoplamiento, tenemos que aplicar la propiedad en el .Special elemento usando un built-in CSS seudo class.

Los : objetivos default seudo libración el elemento cada vez que el ratón sobre ella y aplica las propiedades CSS en él. En nuestra for, se han centrado en la .Special elemento y cuando el usuario se coloque el cursor sobre ella, el color del elemento de enlace cambiará a rojo.

Aquí es una demo,

DEMO

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<style>
a {
font-size: 16px;
font-family: serif;
color: black;
}
.special:hover {
color: red;
}
</style>
</head>
<body>
<a> Normal Link </a>
<a class="special"> Cool Link </a>
</body>
</html>

salida

How to change link color on hover in CSS? - 4

De esta manera, podemos cambiar el color enlace en vuelo estacionario . Si te gusta el artículo, por favor comparta sus comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *