[Résolu] Background rollover en css sur un lien-div ?

Bonjour à tous,

Mon premier post ici, ça à l'air sympa !

J'ai un léger soucis :

J'utilise la technique du "a{display:block;}" à l'intérieur d'un div pour rendre celui cliquable tout en restant valide.

Je cherche appliquer un changement de background sur le div lors du rollover. Ca fonctionne avec un a:hover, mais évidemment le background est affiché au-dessus du div, ce qui n'est pas très pratique pour la lecture

Avec z-index ce problème disparaît, par contre le lien n'est plus actif lors du survol des caractères, donc pas top non plus.

J'aimerais tant qu'à faire me passer de javascript et rester valide, auriez-vous une idée ?

Merci !
Modifié par kursus (06 Jan 2010 - 17:09)

Bonjour,

On parle bien d'un lien sans contenu avec une image de fond pour "le visuel" ?

Si c'est le cas c'est peut-être valide pour la validateur (qui n'est qu'une machine) mais ce n'est ni accessible, ni une bonne pratique. Pour s'en rendre compte il suffit de désactiver au choix les images ou les CSS (ainsi on se rend compte que l'utilisateur de lecteur d'écran ne peut plus naviguer, que l'utilisateir de navigateur text-only ne peut plus naviguer et que le robot indexeur ne peut plus indexer ; pas glop, en gros).

Une image porteuse de contenu doit TOUJOURS se trouver dans le code HTML avec un attribut alt duement rempli.

Les animations doivent se gérer en JS qui est un langage standard tout à fait recommendable (faut arrêter de croire que le JS doit être banni des pages web).

Salut,

et merci pour ta réponse.

Désolé de ne pas avoir été clair.

Je parle d'un div avec un contenu classique (h2,p,a), la seule différence est que le lien est en display block pour prendre toute la surface du div.

Voici le code :

<div>
<h2>titre</h2>
<p>paragraphe</p>
<a>lien</a>
</div>

a {
display: block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%; 
text-indent: -9999%;
}

Il n'y a aucun effet de background de base, d'image de fond ou quoi que ce soit, je cherche juste à appliquer un background-color au div (ou au lien donc) au survol.

Je sais bien que c'est un hack des fondamentaux html mais ca reste valide ET accessible (la désactivation des css ou le seo ne posent aucun problème).

Je ne crois pas que le js doit être banni des pages web, je crois simplement qu'il vaut mieux faire simple plutôt que de faire compliqué, et j'ai toujours plus d'admiration pour un designer qui utilise css pour les rollovers plutôt que javascript (en utilisant le même code depuis douze ans).

Après réflexion je pense que ce problème n'est pas résoluble en css; on ne peux pas s'appuyer sur les mécanismes de bases car ceux-ci sont détournés dans la situation initiale.

Mais sait-on jamais !! Je suis preneur de toutes les pistes et idées !!

Merci pour l'aide

ok... Le problème est effectivement tout autre.

Le comportement que tu as est exactement ce que tu demande au navigateur de faire (donner un fond à l'élément a), le problème est qu'il est impossible en CSS seul de modifier le parent lors du survol de l'enfant (les selecteurs CSS3 le permettront peut-être, mais il faudra du temps pour que ce soit implémenté correctement dans les navigateurs).

Tu as donc deux solutions :
* tu appliques le :hover à l'élement div mais cela ne fonctionnera pas pour IE6 (moindre mal, n'impacte pas l'accessibilité ou la navigation), ou
* tu utilises JS pour modifier la couleurs de fond du div lors du survol du a.

aaaaaaaarrrrrrrg comme tu as raison !!! J'avais oublié que :hover ne nécessitait pas forcément "a" !!!!

Merci beaucoup Laurie-Anne !!!