INFORMÁTICA Bachillerato: CSS 7: CAMBIOS EN LAS PROPIEDADES DE LOS LINK CON HOVER

Queremos que al pasar el ratón sobre los enlaces, aparezca una línea de izquierda a derecha debajo del enlace.

Para que afecte a todos los enlaces del blog, definimos un selector de tipo (columna de la izquierda). Pero si queremos que afecte sólo a los enlaces de las entradas, tendremos que definir clases, como se muestra en la columna de la derecha (las diferencias vienen en rojo):

a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
a:after {
content: "";
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
a:hover:after {
left: 0;
}

.post-body a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
.post-body a:after {
content: "";
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
.post-body a:hover:after {
left: 0;
}

Si lo que queremos es aplicar este estilo sólo a enlaces concretos y no de forma general, hay que indicarlo en la plantilla del Blog creando selectores especiales en lugar de los genéricos:

a.enlacedes {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
a.enlacedes:after {
content: "";
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
a.enlacedes:hover:after {
left: 0;
}

En nuestro post, cada vez que queramos un enlace con este estilo, tendremos que añadir esa clase:

<a class="enlacedes" href="http://direccionenlace.com">Enlace</a>

Esta práctica y otras de efectos hover con animaciones las encontráis en Oloblogger.

Además, en este enlace se incluyen 30+1 maneras de resaltar un enlace con hover.

EJERCICIO
Definir una clase, de las que se proponen en Oloblogger, para enlaces concretos de vuestras entradas y aplicarla a un enlace en una nueva entrada.

19 ene 2017

CSS 7: CAMBIOS EN LAS PROPIEDADES DE LOS LINK CON HOVER