Discussion :

[PtitGénie]

Bonjour tout le monde ^^

Voici mon problème :
j'ai un tableau, qui est mon menu, où chaque cellule contient le nom d'une catégorie. Ces noms sont des liens, et sont en même temps des titres h2.
Bref, un truc de ce genre :

Code :

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

1
2
3
4
5
6
7
 
<table>
   <tr>
      <td class=menu_td><h2>Titre 1</h2></td>
      <td class=menu_td><h2>Titre 2</h2></td>
   </tr>
</table>

Imaginons que là, c'est en fond blanc écriture noire.
Je voudrais que lorsque l'on passe la souris la cellule, cela devienne fond noir écriture blanche. Là ça me paraissait simple :

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
 
			h2{	
				color:#000000;
			}
 
			h2:hover{	 
				color:#ffffff;
			}
 
			.menu_td{	
				background-color:#ffffff; 
			}
 
			.menu_td:hover{	
				background-color:#000000; 
			}

Le problème, c'est que cela fonctionne lorsque l'on passe la souris sur le titre (h2), vu qu'on passe en même temps sur la cellule.
Mais lorsque l'on passe la souris dans un endroit de la cellule, sans toucher le titre (h2), et bien le fond change mais pas la couleur du h2.

Définir un "color:#000000" dans menu_td ou le menu_td:hover ne change rien, la défition du h2 prenant le dessus apparement.

Bref, j'espère avoir été clair ^^

Par exemple, je me demandais s'il existait un truc de ce genre :

Code :

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

1
2
3
			.menu_td:hover h2{	
				background-color:#000000; 
			}

[GihefBey]

Bonjour,

Tu dois certainement pouvoir te passer de tableau pour faire ça (un menu, des titres de menu).

Annule les marges par défaut du tableau

Code HTML :

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

<table cellpadding="0" cellspacing="0">

Tes titres possèdent des marges. Enlève-les aussi pour voir.

Code CSS :

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

1
2
3
4
h2 {
  margin : 0;
  padding : 0;
  }

Et agit uniquement dessus.

++
Le :hover ne fonctionne que sur des <a> dans des versions anciennes de IE.

-

[PtitGénie]

En effet, merci beaucoup !