Effet de survol sur du texte qui parfois devient un lien...

Bonjour,

Je suis face à une question existentielle : comment gérer les rollover sur du texte qui sont une fois sur deux des liens ?

J'ai une liste qui contient plusieurs liens, chaque lien contient en background un picto différent. Bien entendu je sais fonctionner un hover avec changement d'image en utilisant le technique des portes coulissantes.
Voici le code utilisé :

<ul>
   <li class="picMail"><a>lien01</a></li>
   <li class="picSearch"><a>lien02</a></li>
   <li class="picDownload">lien01</li>
</ul>

.picMail {
    background: url('../img/icon/picto-email-green.png') no-repeat 0 0 !important;
    padding-left: 20px;
}
.picMail:hover {
    background: url('../img/icon/picto-email-green.png') no-repeat 0 -75px !important;
}
.picSearch {
    background: url('../img/icon/picto-search-green.png') no-repeat 0 0 !important;    
}
.picSearch:hover {
    background: url('../img/icon/picto-search-green.png') no-repeat 0 -75px !important;    
}

Avec ça j'arrive à faire :
- afficher le picto en mode normal quand il y a un lien
- afficher le picto en mode hover quand il y a un lien


Le problème est que je n'arrive pas à faire en sorte que lorsqu'il n'y a pas de lien, le hover fonctionne toujours car le picto est placé sur le <li>.
Si je mets le picto sur le <a>, dans ce cas le picto n'apparait plus du tout quand il n'y a pas de lien (normal dira-t-on)

Je ne sais pas si j'ai été clair, au cas où ce ne serait pas le cas, voici ce que je cherche à obtenir :
- afficher le picto en mode normal quand il y a un lien
- afficher le picto en mode hover quand il y a un lien
- afficher le picto en mode normal quand il n'y a pas de lien
- ne pas afficher le picto en mode hover quand il n'y a pas de lien

Merci d'avance ^^
Modifié par cevichero (08 Jun 2012 - 11:48)

Salut,

assigner les style sur tes liens plutôt que sur les <li> devrai résoudre ton problème je pense.

tu peut également définir si le <a> est un lien ou une ancre avec:

a\[href\]
{
  /* Ton CSS */
}

Sans les slashes bien sur...
Modifié par JJK801 (08 Jun 2012 - 11:57)

Bonjour,
Si ton image pour le hover est au moins aussi grande que celle sans hover, tu peux tenter de cacher celle du mode normal qui serait affichée dans le li et la cacher avec celle du hover qui serait affichée dans le a.

Salut !

j'ai suivi le conseil de mettre l'image sur la balise <a> et du coup pour gèrer le mode "non lien", j'ai ajouté une balise <span> quand il n'y a pas de lien... ^^

merci !