28172 sujets

CSS et mise en forme, CSS3

Changer background-image au passage de la souris [Résolu]

Bonjour à tous,

tout est dans le titre, afin de créer des menus dynamiques je voudrai que l'image de fond de mes blocs se modifie au passage de la souris.
J'ai fait ceci:
[code=css].case{
text-align:center;
float:left;
width:19.7%;
height:1.6em;
background-image:url("fondbase.jpg");
margin:auto;
border:solid 1px white;
}

.case:hover {background-image:url("fondeclair.jpg");}


Et ça ne fonctionne pas,
pour avoir l'effet voulu je suis obligé d'écrire un petit bout de js dans chaque <div> qui appelle .case, mais comme il y en a pas mal ça alourdit le code. CSS permettrait d'alléger tout ça...

Merci d'avance pour votre aide

A+
Philippe
Modifié par filtep (07 Feb 2010 - 15:21)
Salut,

à priori pas de raison que ça ne fonctionne pas... sauf avec IE6 qui n'interprète la pseudo-classe :hover que sur les liens.

Une page en ligne ?
salut,

malheureusement la page n'est pas en ligne, pourtant même avec FF ça ne marche pas...
plus de code:
[code=html]<html>
<head>
<style>

a:link { text-decoration:none;font-family:arial;color:#702902;}
a:visited { text-decoration:none;font-family:arial;color:#702902;}
a:hover { text-decoration:none;font-weight:bold; color:#FFDA5A;}
a:active { text-decoration:none;font-family:arial;color:#702902;}



.navig{
margin-top:10px;
width:900px;
height:1.6em;
margin-left:auto;
margin-right:auto;
border:1px solid white;
}

.case{
text-align:center;
float:left;
width:19.7%;
height:1.6em;
background-image:url("fondbase.jpg");
margin:auto;
border:solid 1px white;
}

.case:hover {background-image:url("fondeclair.jpg");}


</style>
</head>
<body>


<div class="navig">
  <div class="case" ><a href=# onclick="document.cab.style.visibility='hidden'
                                       document.plan.style.visibility='hidden'
                                       document.plaques.style.visibility='visible';">Médecine Générale</a> </div>
  <div class="case"><a href=#>Dermatologie</a> </div>

  <div class="case"><a href=#>Ophtalmologie</a> </div>

  <div class="case"><a href=#>Soins dentaires</a> </div>
  <div class="case"><a href=#>Soins infirmiers</a> </div>
</div>
<div class="clear"></div>
<div class="conteneur">

  

</body>
</html>



qu'est-ce qui cloche ?

A+
Philippe
filtep a écrit :
qu'est-ce qui cloche ?
Les chemins de tes images sont bons ?

Pour faire le test remplacer les background-image par :
.case {
	background: yellow;
}
.case:hover {
	background: red;
}
A noter que le lien proposé par IshimaruChiaki devrait t'intéresser : d'abord parce qu'il est préconisé d'utiliser les éléments UL / LI / A pour faire des menus et ensuite parce qu'en mettant le :hover sur le lien ça fonctionnera partout.
Heyoan,
en essayant avec background yellow et red, idem... le bloc reste désespérément jaune...
Je ne comprend pas, on dirait que l'instruction .case: hover{blabla;} n'est pas prise en compte ...???

Ishimaruchiaki, merci pour le lien, je vais aller voir

A+
Philippe
Eh bien non en effet je n'ai pas déclaré de doctype... j'essaie tout de suite et je vous tiens au courant...

A+
Philippe
Modifié par filtep (07 Feb 2010 - 15:21)
Trop fort Heyoan !

Le problème venait bien de l'absence de Doctype... Je suis plutôt débutant, je vais potasser l'utilité des Doctypes pour comprendre.

En tous cas Merci à tous les deux, j'étais là dessus depuis hier soir Smiley cligne

A+
Philippe
filtep a écrit :
Eh bien non en effet je n'ai pas déclaré de doctype...
Pour partir sur de bonnes bases je t'invite à utiliser le (désormais célèbre) Squelettor.


Edit: De rien Smiley smile !

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Modifié par Heyoan (07 Feb 2010 - 15:14)
Sujet clos
Aller à