- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
liens a:hover avec fond et images sans fond, un ex de a[href$=jpeg]
Si on fait a:hover { background: SomeColor }
cela s'applique aussi à une image avec HTML <a ...><img src="..." /></a>
Ajouter a:hover img { background-color: #fff; }
ne peux pas fonctionner (cf https://perishablepress.com/css-remove-link-underlines-borders-linked-images/)
1ere solution (couteuse sur gros site)
consiste à ajouter une classe aux images qui ont un lien
a.image-border {
text-decoration: none;
border: 0 none;
}
2e solution CSS 3
avec le match de pattern et attribut sélecteur, par ex:
a[rel="nofollow"] { background: yellow; }
img[alt="arrow"] { border: green; }
pre[class="perl"] { color: red; }
Un ex avec ajout du match pattern serait : a[href$=png] { text-decoration: none; border: 0 none; }
rappel: element[attribute$="value"]
pour la valeur de l'attribut se termine par "value"
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
}
Inconvénients:
- si les images ont un lien qui ne référence pas l'extension (lien vers audio ou vidéo, URL dossier...), elles n'auront pas ce style
-
liens sur du texte qui pointent vers les extensions spécifiées.
En d'autres tremes, cette solution ne permet pas de distinguer les liens appliqués sur du texte (<a>txt</a>) des liens sur les images (<a ...><img/></a>)
. Tous les liens texte qui pointent vers des images recevront ce style.
Ex de sel de liens qui pointent vers une URL : a[href*=domain-or-directory] { text-decoration: none; border: 0 none; }
Penser au cas "<a><span>txt</span> et <img></a>"
<a href="..."><img src="so.jpg"></a>
<a href="..."><span class="text">some text</span></a>
<a href="..."><span class="text">some text</span> and <img src="so.jpg"></a>
a .text { padding: 1em; }
a:hover .text {background-color:#ff0}