Discussion :

[Ajite]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bisûnûrs]

Mets du texte en visibility hidden dans tes a :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#menu a span{
   visibility:hidden;
}

[Ajite]

Merci mais malheureusement cela ne fonctionne pas
:/ je viens d'heberger le site si cela peu vous aider
BeArts

[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...

[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