30 votos

Cómo usar 'hover' en CSS

He utilizado el código de abajo en el fin de cumplir este objetivo:

Cuando el ratón pasa sobre el ancla, el subrayado sale,

pero esto no funcionó,

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

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

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

35voto

David Thomas Puntos 111253

Si desea subrayar que estar presente mientras se pasa el cursor sobre el enlace, a continuación:

a:hover {text-decoration: underline; }

es suficiente, sin embargo también se puede utilizar un nombre de clase de 'hover' si usted lo desea, y el siguiente será igualmente aplicable:

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

Por cierto que puede ser vale la pena señalar que el nombre de la clase de 'hover' en realidad no añade nada al elemento, como el pseudo-elemento de a:hover hace lo mismo que el de a.hover:hover. A menos que sea sólo una demostración del uso de un nombre de clase.

7voto

SirCommy Puntos 136

Hay muchas formas de hacerlo. Si usted realmente desea tener un 'pase' de la clase en su elemento, entonces usted tendría que hacer:

a.hover:hover { code here }

A continuación, de nuevo, es raro tener un nombre de clase que hay, esta es la forma de hacer una regular hover:

select:hover { code here }

Aquí hay algunos ejemplos más:

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 }

a :hover es uno de los muchos " pseudo-clases.

Por ejemplo, puede cambiar, puede controlar el estilo de un elemento cuando el ratón pasa por encima de él, cuando se hace clic en él, y cuando estaba previamente clic.

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; }

Aparte de lo incómodo que los colores que he dado como ejemplos, el vínculo con la 'casa' de la clase será de color rojo por defecto, de color verde cuando el ratón pasa por ellos, azul cuando se hace clic en negro y después de que se ha hecho clic.

Espero que esto ayude

4voto

Ballsacian1 Puntos 6571

una.hover:hover

4voto

chaos Puntos 69029
a.hover:hover {
    text-decoration:underline;
}

2voto

alex Puntos 186293

Usted necesita para concatenar el selector y el pseudo selector. Usted también necesitará un elemento de estilo para contener sus estilos. La mayoría de las personas el uso de una hoja de estilos externa, para muchos de los beneficios (almacenamiento en caché para uno).

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

<style type="text/css">

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

    }

</style>

Sólo una nota: hover clase no es necesaria, a menos que usted está definiendo sólo ciertos vínculos a tener este comportamiento (que puede ser el caso)

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X