Parada subrayado enlaces de imagen

Question

Uno de mi barra de widgets, tengo una imagen que es un hipervínculo. El problema es que el CSS lo subraya. ¿Cómo se quita el subrayado?

Actualización: Sólo se dio cuenta de que esto es lo que está causando el subrayado:

}
.entry a,
.secondaryColumn a,
#commentsContainer h3 a,
.commentlist .comment-author a {
    border-bottom: 1px solid #ddd;
    color: #3c6c92;
    font-weight: bold;
}
.entry a:hover,
.secondaryColumn a:hover,
#commentsContainer h3 a:hover,
.commentlist .comment-author a:hover,
.commentlist .comment-meta a:hover {
    color: #3c6c92;
    border-bottom: 1px solid #3c6c92;
}

cambiar el border-bottom a 0px hace el truco, pero luego se despega de la frontera a través de todos los widgets. Yo uso la rejilla de enfoque con un poquito de personalización @ thunderror.com

Answer 1

Por definición, no es realmente la imagen con hipervínculos. Es a etiqueta de hipervínculo que contiene img etiqueta de imagen. Lo más probable es un enlace que realmente está subrayada, la imagen es sólo dentro de él.

Es necesario crear nueva regla CSS que coincide con su enlace con la imagen y especifica no subrayado (que también podría ser la propiedad border-bottom por cierto, algunos recomiendan que durante subrayado para una mejor apariencia tipografía).

Si es posible por favor, dar enlace al sitio. CSS, en teoría, es aún peor de PHP en teoría. :)

supongo que es la imagen de twitter sobre en la parte superior de la barra lateral? Prueba esto:

.textwidget a, .textwidget a:hover { border-bottom: none; }

Pero esto afectará a todos los widgets de texto. Es probable que sea mejor clase individual de asignación de enlace como

<a href="http://thunderror.com/" class="twitter-link">

y el estilo de ella.

Answer 2

Tengo una solución de trabajo a este problema.

`<ul><li><a href="#"><img alt="" src="/images/your/image.jpg"> The text you want underlined on hover</a></li></ul>`

En el css que tiene que hacer img{display: block;} o img{float: left;}

Por supuesto, le toca a usted la opción que desea seleccionar en función de sus necesidades.

Espero que esto ayuda a resolver el problema para usted (aunque un año más tarde) y cualquier otra persona con el mismo tema.

Un ejemplo de trabajo se puede ver en El libro del blog Depository . Busque los editores Blog de la sección inferior derecha:)

Answer 3

Editar: para responder a su pregunta revisada y ampliada:

le han acabado en una cosa maravillosa que se llama CSS especificidad. Te voy a dejar Google para los detalles morbosos, pero básicamente, ".commentlist .comment-autor de un" mueve de un tirón más bits especificidad que ".twitter-link".

Si desea anular el estilo, que había necesidad de hacerlo de esta manera:

.commentlist .comment-author .twitter-link {
    border-bottom: none;
}

(estoy 99% seguro de que un nombre de clase (.twitter-link) es más específico que el nombre de un elemento (a). Si lo anterior no funciona, puede ser necesario añadir una clase como "Twitter -Widget "para el widget, y luego anular con" .commentlist .comment-autor .twitter-widget a {... ")

---

respuesta Mayor, que todavía pueden responder a las preguntas más generales:

Bueno, si quieres activar el enlace subrayado a nivel mundial, se podría añadir el siguiente segmento de CSS para style.css:

a { text-decoration: none; }

Si quieres desactivar subrayando sólo para ese enlace, que podría hacer:

.widgetname a { text-decoration: none; }

Donde .widgetname es el valor en el atributo "clase" para el contenedor del widget.