Aller au contenu

Pronlème dans le hover avec Firefox ?


easytype

Sujets conseillés

oui ça j'ai bien vue mais je ne comprend toujours pas ce que tu cherches à obtenir..... ^^'

quand je passe ma souris sur les blocs du haut, on a bien un effet de "rollover" avec l'image qui change mais je ne vois pas bien ce que viennent faire les liens 4, 5 et 6 ou alors j'ai vraiment besoin de vacances :D

Lien vers le commentaire
Partager sur d’autres sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Un menu avec multiples survols sans preload d'images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body
{
background: #303036;
}
ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:1;
padding:0;
}
ul {
position: absolute; /* positionnement pour IE5 et IE5.5 */
top: 1;
left: 210px;
background: transparent url(abf.png) top left repeat; /* arrière-plan général du menu */
width: 573px;
height: 146px;

}
li {float: left;}

li a { /* dimensions et définitions des boutons */
display: block; /* mise en block de <a> pour lui donner des dimensions */
height: 147px;
width: 191px;

}
li a:hover {
background: transparent url(abf.png) top left no-repeat;
}
a#lien1:hover {
background-position: -0px 101%;
}
a#lien2:hover {
background-position: -191px 101%;
}
a#lien3:hover {
background-position: -382px 101%;

-->
</style>
</head>
<body>
<ul>
<li><a id="lien1" href="#"></a></li>
<li><a id="lien2" href="#"></a></li>
<li><a id="lien3" href="#"></a></li>
<li><a id="lien4" href="#"></a></li>
<li><a id="lien5" href="#"></a></li>
<li><a id="lien6" href="#"></a></li>
</ul>


</body>
</html>

Merci de regarder ! :)

Lien vers le commentaire
Partager sur d’autres sites

ha ok pigé ^^

donc... ça viens de la ligne 35

li a:hover {
background:transparent url(abf.png) no-repeat scroll left top;
}

noté de cette façon, ce style là s'applique à tous les liens a:hover de tous les items li qui composent la liste donc il est logique que cela s'applique à tes liens 4, 5 et 6.

donc...

pour éviter le souci, une solution consisterait à taper ton style de cette manière :

a#lien1:hover, a#lien2:hover, a#lien3:hover {
background: transparent url(abf.png) top left no-repeat;
}

de cette façon, le "hover" ne va s'appliquer qu'aux liens qui nous intéressent : 1, 2, 3 ^^

ps : et une dernière petite chose, si on a pas besoin des 3 liens suivant, les 4, 5, 6 ont peut supprimer les lignes correspondantes dans le code html

Modifié par libelinfo
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...