18073 sujets

Questions générales et questions de débutants

Problème d'arrière-plan

Bonjour,

J'ai créé une balise <div></div> avec du texte à l'intérieur et une image d'arrière-plan. Le problème est que j'aimerais avoir l'image d'arrière-plan qui change au passage de la souris (css: a hover) sur la balise entière <div></div> et non pas sur les liens textuels.

Quelqu'un peut-il m'aider?

Merci d'avance

Jérôme
Bonjour,
bleifrei a écrit :
j'aimerais avoir l'image d'arrière-plan qui change au passage de la souris (css: a hover) sur la balise entière <div></div> et non pas sur les liens textuels.


tout d'abord la bonne syntaxe pour l'emploi de la pseudo classe hover sur un lien serait :

a:hover {

}

et non 

a hover {

}


Sinon comme il ne s'agit pas dans ton cas de lien mais d'1 div il faudrait :

div:hover {

}


Il reste un problème de taille et c'est que IE ne reconnait la pseudo classe hover que sur les liens...

Donc, et dans l'attente de jours meilleurs tu peux rajouter javascript à la liste de tes amis.
On peut contourner le problème pour Internet explorer. Comme il ne reconnaît la pseudo classe hover que sur les liens, on lui donne ce qu'il veut :

Balisage :

<div id="untel">
   <a href="#" title=""></a> [#orange]/* lien vide pour l'effet au survol */[/#]
   <div id="texte"><p>Ici du texte positionné</p></div>
</div>


CSS :

div#untel { [#orange]/* conteneur de l'effet */[/#]
   margin: 0;
   padding: 0;
   width: XXpx;
   height: XXpx;
   }

#untel a {  [#orange]/* image par défaut */[/#]
   display: block;
   width: XXpx;
   height: XXpx;
   background-image: url(adresse/d'une/image.extension) no-repeat;
   }
	 
#untel a:hover { [#orange]/* image au survol */[/#]
   background-image: url(adresse/d'une/image.extension) no-repeat;
   }

div#texte { [#orange]/* div contenant le texte */[/#]
   position: xxx;
   left: xxx;
   top: xxx;
   }

On peut voir le résultat ici : http://univers-fusco.com/tests/hover.php
Le texte sur l'image a été positionné grâce à une balise div (avec position relative).

Si on désactive les images, on n'a pas de contenu textuel de remplacement. Il faut éviter d'utiliser une image importante pour la compréhension de la page ?! Smiley ohwell
Modifié par Smiley neko (27 Mar 2006 - 23:48)
neko a écrit :
Il faut éviter d'utiliser une image importante pour la compréhension de la page ?! Smiley ohwell
Et j'ajouterais : il faut éviter de rajouter un lien vide (de sens comme de contenu) pour rajouter artificiellement une fonctionnalité non supportée par un navigateur (et en plus d'une certaine version, puisque IE7 va régler ce défaut).
Hum. C'est vrai. Le coup du lien vide n'est pas terrible, mais IE 7 ne sera pas non plus une référence en terme de gestion de la pseudo classe hover.
J'ai l'ai testé sur un formulaire utilisant des changement de couleur de fond au survol des champs "input" ou "textarea", il ne fait pas mieux que IE 6 : c'est à dire aucun effet de survol déclenché.

mpok, quand tu dis qu'il va régler ce défaut, tu parles de la gestion de "hover" sur les liens ? IE 7 ne semble pas encore gérer ça pour toutes les utilisations qu'on pourrait en faire.
Sujet clos
Aller à