Aller au contenu

Pronlème dans le hover avec Firefox ?

easytype

Par easytype
dans (X)HTML et CSS

 Partager

Sujets conseillés

libelinfo

libelinfo

Posté
Posté

je comprend pas ce que tu cherches à faire ?

juste un changement d'image au passage de la souris ou quelque chose de plus compliqué ?

libelinfo

libelinfo

Posté
Posté

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

easytype

easytype

Posté
  • Auteur
Posté

^^

C'est moi qui m'éxprime mal ^^

Justement, les liens 4, 5 & 6 me gènent, c'est eux qui je ne voit pas ce qu'ils font là :D

easytype

easytype

Posté
  • Auteur
Posté 

<!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 ! :)

libelinfo

libelinfo

Posté
Posté (modifié)

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
easytype

easytype

Posté
  • Auteur
Posté

Hey, Merci beaucoup, sa marche super !!! :)

Merci pour l'aide ^^

Arf, oui, pour les liens 4, 5 & 6 j'avais repris ça d'une autre "image"

Encore merci et bonne soirée. :D

Veuillez vous connecter pour commenter

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



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...