Comment changer de couleur de fond sur les liens texte sur vol stationnaire, mais pas l'image liens

Question

J'ai une règle CSS comme ceci:

a:hover { background-color: #fff; } 

Mais cela se traduit par un écart mauvais regardant en bas sur les liens d'image, et ce qui est encore pire, si j'ai des images transparentes, la couleur de fond du lien peut être vu à travers l'image.

Je trébuché sur ce problème plusieurs fois, mais je toujours résolu à l'aide de l'approche rapide et sale d'attribuer une classe aux liens d'image:

a.imagelink:hover { background-color: transparent; } 

Aujourd'hui, je cherchais un plus élégant solution à ce problème quand je suis tombé sur this.

Fondamentalement ce qu'il suggère utilise display: block, et cela résout vraiment le problème pour les images non transparentes. Cependant, il en résulte un autre problème: le lien est maintenant aussi large que le paragraphe, bien que l'image ne le soit pas.

Existe-t-il une bonne façon de résoudre ce problème, ou dois-je à nouveau utiliser l'approche dirty?

Merci,

Answer 1

J'ai essayé de trouver un sélecteur qui ne recevraient que <a> éléments qui n'ont pas <img> descendants, mais n'a pas pu trouver .. . à propos des images avec cet écart en bas, vous pouvez effectuer les opérations suivantes:

a img{vertical-align:text-bottom;} 

Cela devrait se débarrasser de l'arrière-plan montrant derrière l'image, mais peut se débarrasser de la mise en page (par pas grand-chose, bien), donc Faites attention.

Pour les images transparentes, vous devez utiliser une classe.

J'espère vraiment que c'est résolu en CSS3, en mettant en œuvre un sélecteur parent.

Answer 2

idée Untested:

a:hover {background-color: #fff;} 
img:hover { background-color: transparent;} 

Answer 3

Ce qui suit devrait fonctionner (non testé):

D'abord, vous

a:hover { background-color: #fff; } 

Ensuite, vous

a:imagelink:hover { background-color: inherit; } 

La deuxième règle remplacera la première pour < a class = "imagelink" etc.> et préservera la couleur d'arrière-plan du parent.

J'ai essayé de le faire sans la classe = "", mais je ne trouve pas de sélecteur CSS qui soit le contraire de foo> bar, qui stylise une barre quand elle est l'enfant d'un foo. Vous voudriez styler le foo quand a un enfant de barre de classe. Vous pouvez faire cela et même des choses plus sophistiquées avec jQuery, mais cela n'est peut-être pas souhaitable en tant que technique générale.

Answer 4

Vous pouvez utiliser display: inline-block mais ce n'est pas complètement crossbrowser. IE6 et inférieur auront un problème avec cela. Je suppose que vous avez des espaces entre <a> et <img>? Essayez de supprimer que comme ceci:

<a><img /></a>

Answer 5

Je suis confus à ce que vous Nommant « liens d'image » ... est qu'une balise « img » intérieur d'une ancre? Ou définissez-vous l'image en CSS?

Si vous configurez l'image en CSS, alors il n'y a pas de problème ici (puisque vous êtes déjà en mesure de le cibler) ... donc je dois supposer que vous voulez dire:

<a ...><img src="..." /></a> 

Auquel , Je suggère que vous spécifiez une couleur d'arrière-plan sur l'image ...Donc, en supposant que le récipient est dans devrait être blanc ...

a:hover { background: SomeColor } 
a:hover img { background-color: #fff; } 

Answer 6

que je fais habituellement quelque chose comme ça pour enlever l'écart en images:

img { 
    display: block; 
    float: left; 
} 

Bien sûr, ce n'est pas toujours la solution idéale, mais il est très bien dans la plupart des situations.

Answer 7

J'ai eu ce problème aujourd'hui, et j'ai utilisé une autre solution que display: block grâce au lien par asker. Cela signifie que je suis capable de conserver le lien SEULEMENT sur l'image et non de le développer dans son conteneur.

Les images sont en ligne, elles ont donc un espace en dessous d'elles pour la partie inférieure des lettres comme "y, j, g". Cela positionne les images à baseline, mais vous pouvez le modifier si vous n'avez pas <a>TEXT HERE</a> comme avec un logo. Cependant, vous devez toujours masquer l'espace de ligne de texte et c'est facile si vous utilisez une couleur unie comme arrière-plan (par exemple body ou div#wrapper).

body { 
    background-color: #112233; 
} 
a:hover { 
    background-color: red; 
} 
a img { 
    border-style: none; /* not need for this solution, but removes borders around images which have a link */ 
    vertical-align: bottom; /* here */ 
} 
a:hover img { 
    background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */ 
} 

Answer 8

Cette façon de procéder fonctionne mieux.

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] { 
    text-decoration: none; 
    border: 0 none; 
    background-color: transparent; 
    } 

Aucune classe fastidieuse à appliquer à chaque image. Description détaillée:

http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/

Answer 9

J'ai eu le même problème. Dans mon cas, j'utilise l'image comme arrière-plan. J'ai fait ce qui suit et il a résolu mon problème:

background-image: url(file:"use the same background image or color");