CSS Problème de hover

Version imprimable

Bonsoir tout le monde. J'ai un petit problème de CSS.

Problème : Quand je me déplace sur mes liens (sur les images plus grosses) le hover ne fonctionne que si je suis à l'extreme haut de celle-ci ! (alors que je voudrai que des que le visiteur passe le curseur sur l'image ! Elle utilise celle du hover.)

Mon css du menu:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*********************MENU***************************************
*********************************************************************/
 
#menu
{
	position:relative;
	left: 600px;
}
#menu a
{
	display:block;
}
 
.menu_home_home { background:url(img/Menu/Home/home.jpg) no-repeat; width:129px; height:122px; }
.menu_home_home:hover { background:url(img/Menu/Home/home_hover.jpg) no-repeat; width:129px; height:122px; }
.menu_home_profil { background:url(img/Menu/Home/profil.jpg) no-repeat; width:129px; height:115px; }
.menu_home_profil:hover { background:url(img/Menu/Home/profil_hover.jpg) no-repeat; width:129px; height:115px; }
.menu_home_gallerie { background:url(img/Menu/Home/gallerie.jpg) no-repeat; width:129px; height:101px; }
.menu_home_gallerie:hover { background:url(img/Menu/Home/gallerie_hover.jpg) no-repeat; width:129px; height:101px;}
.menu_home_contact { background:url(img/Menu/Home/contact.jpg) no-repeat; width:129px; height:86px; }
.menu_home_contact:hover { background:url(img/Menu/Home/contact_hover.jpg) no-repeat; width:129px; height:86px;}

Mon code html

Code:

1
2
3
4
5
6
7
 
<div id="menu">
	<a href="index.php?page=home" class="menu_home_home"></a>
	<a href="#" class="menu_home_profil"></a>
	<a href="#" class="menu_home_gallerie"></a>
	<a href="index.php?page=contact" class="menu_home_contact"></a>
</div>

Merci d'avance :oops:

10/04/2007, 22h43
Bisûnûrs
Mets du texte en visibility hidden dans tes a :

Code:

<a href="index.php?page=home" class="menu_home_home"><span>HOME</span></a>
Code:

1 2 3 #menu a span{ visibility:hidden; }
10/04/2007, 22h53
Ajite

Merci mais malheureusement cela ne fonctionne pas :cry:
:/ je viens d'heberger le site si cela peu vous aider ;)
BeArts
10/04/2007, 23h09
MasterOfChakhaL

Salut,

Apparemment, tes blocs de gauche continuent sur la droite (même si c'est transparent).
Ton bloc menu est en dessous et n'est donc pas accessible à la souris -> le hover n'est pas déclenché.
Tes Hovers fonctionnent quand tu passes la souris dans les espaces horizontaux qui séparent tes deux blocs de gauche (d'ailleurs il semblerait que tes images pour le hover ne soient pas sur ton serveur).

Tu peux essayer de jouer avec la propriété z-index sur tes différents éléments. Cette propriété permet de définir, lorsque des éléments se chevauchent, l'ordre de superposition (plus la valeur est grande, plus l'élément sera placé au dessus)

Le mieux serait encore de revoir ta feuille de style pour éviter ces chevauchements, mais ca risque de remettre en cause une bonne partie du css...
10/04/2007, 23h13
Ajite

Merci beacoup j'essaye de suite ;) ! Oui j'ai hebergé que le hover du home (car la personne pour qui je fais le site ne pas encore fournit ses autres images ^^') :/

edit Ajite : Merci j'ai résolu le problème grâce à tes explications ! J'avais oublié de mettre une taille pour mes news et mes menu donc y avait une partie invisible qui passé sur mon menu :oops: