selectores - Cómo usar ''hover'' en CSS

selectores css3

Question

Usé el siguiente código para cumplir este objetivo:

Cuando el mouse pasa el mouse sobre el ancla, sale el subrayado,

pero no funcionó,

    <a class="hover">click</a>

    a .hover :hover{
        text-decoration:underline;
    }

¿Cuál es la versión correcta para hacer esto?

Answer 1

Deberías haber usado:

a:hover {
    text-decoration: underline;
}

hover es una pseudo clase en CSS. No es necesario asignar una clase.

Answer 2

El href es un atributo obligatorio de un elemento de anclaje, por lo que sin él, no se puede esperar que todos los navegadores lo manejen por igual. De todos modos, leí en algún lugar de un comentario que solo quieres que el enlace esté subrayado al pasar el ratón, y no de otra manera. Puede usar lo siguiente para lograr esto, y solo se aplicará a los enlaces con la clase- hover :

<a class="hover" href="">click</a>

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}

Answer 3

Estaba trabajando en un buen defecto la última vez y me preguntaba cómo utilizar correctamente la propiedad de desplazamiento para el enlace de etiqueta A y para el navegador IE. Algo extraño para mí fue que IE no pudo capturar un elemento de enlace de etiqueta basado en un simple selector A. Entonces, descubrí cómo forzar incluso la captura de un elemento de etiqueta y descubrí que debemos usar un selector de CSS más específico. Aquí hay un ejemplo a continuación: Funciona perfecto:

li a[href]:hover {...}

Answer 4

Hay muchas formas de hacerlo. Si realmente quieres tener una clase ''hover'' en tu elemento A, entonces tendrías que hacer:

a.hover:hover { code here }

Por otra parte, no es común tener un ClassName allí, así es como haces un hover regular:

select:hover { code here }

Aqui hay algunos ejemplos mas:

1

HTML:

<a class="button" href="#" title="">Click me</a>

CSS:

.button:hover { code here }

2

HTML:

<h1>Welcome</h1>

CSS:

h1:hover { code here }

: hover es una de las muchas pseudo-clases.

Por ejemplo, puede cambiar, puede controlar el diseño de un elemento cuando el mouse se cierne sobre él, cuando se hace clic y cuando se hizo clic previamente.

HTML:

<a class="home" href="#" title="Go back">Go home!</a>

CSS:

.home { color: red; }
.home:hover { color: green; }
.home:active { color: blue; }
.home:visited { color: black; }

Además de los colores incómodos que he dado como ejemplos, el vínculo con la clase ''home'' será rojo por defecto, verde cuando el mouse se cierne sobre ellos, azul cuando se hace clic y negro después de que se hizo clic.

Espero que esto ayude

Answer 5

Necesita concatenar el selector y el pseudo selector. También necesitarás un elemento de estilo para contener tus estilos. La mayoría de las personas usa una hoja de estilo externa para obtener muchos beneficios (almacenamiento en caché para uno).

<a class="hover">click</a>

<style type="text/css">

    a.hover:hover {
        text-decoration: underline;

    }

</style>

Solo una nota: la clase de vuelo estacionario no es necesaria, a menos que esté definiendo solo ciertos enlaces para tener este comportamiento (que puede ser el caso)

Answer 6

No es una respuesta, sino una explicación de por qué tu CSS no coincide con HTML.

En css, el espacio se usa como un separador para indicar al navegador que busque en los niños, por lo que su css

a .hover :hover{
   text-decoration:underline;
}

significa "buscar un elemento, luego buscar cualquier descendiente de él que tenga clase de vuelo flotante y aspecto de cualquier descendiente de esos descendientes que tengan el estado de vuelo estacionario" y coincidiría con este marcado

<a>
   <span class="hover">
      <span>
         I will become underlined when you hover on me
      <span/>
   </span>
</a> 

Si quieres hacer coincidir <a a class="hover">I will become underlined when you hover on me</a> , debes usar a.hover:hover , que significa "buscar cualquier elemento con clase hover y con estado hover" "

Answer 7

Si desea que el subrayado esté presente mientras el mouse se desplaza sobre el enlace, entonces:

a:hover {text-decoration: underline; }

es suficiente, sin embargo, también puede usar un nombre de clase de ''hover'' si lo desea, y lo siguiente sería igualmente aplicable:

a.hover:hover {text-decoration: underline; }

Por cierto, puede valer la pena señalar que el nombre de clase de ''hover'' realmente no agrega nada al elemento, ya que el elemento psuedo de a:hover hace lo mismo que el de a.hover:hover . A menos que sea solo una demostración de usar un nombre de clase.

Answer 8

a.hover: hover

Answer 9

a.hover:hover {
    text-decoration:underline;
}