18041 sujets

Questions générales et questions de débutants

Background color probleme [Résolu]

Bonjour
Voici mon probleme : je veux faire un fond qui chhange de couleur avec un hover sur un div. Dans ce div il y a 4 sous div, et lorsque je passe ma souris au dessus du div de tete c est le sous div audessus duquel je pointe la souris et seulement lui qui change de couleur
http://img138.imageshack.us/my.php?image=fondcouleurdb8.jpg

Voila l exemple j ai un div la grande bare et 4 sous div que j ai delimite, je passe la souris au dessus de la bare et c est qu un sous div qui change de couleur je veux que ca soit toute la bare.

merci pour les explications si vous trouvez une reponse a mon probleme.
Modifié par xiryu (16 Nov 2006 - 12:02)
Voila mon code :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="style_test.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="bare">
  		<div class="sous-bare1">
		</div>
		<div class="sous-bare2">
		</div>
		<div class="sous-bare3">
		</div>
		<div class="sous-bare4">
		</div>
		
  </div>

</body>
</html>




#bare {
background-color:#009900;
	color: #0099CC;
	width: 800px;
	height: 30px;
}

#bare :hover {
background-color:#FF0000;
}
#bare .sous-bare1 {
	color: #006600;
	width: 200px;
	height: 30px;
	float: left;
}
#bare .sous-bare2 {
	color: #000033;
	float: left;
	width: 300px;
	height: 30px;
}
#bare .sous-bare3 {
	color: #006666;
	height: 30px;
	width: 200px;
	float: left;
}
#bare .sous-bare4 {
	color: #006699;
	float: left;
	height: 30px;
	width: 100px;
}
Bonjour,

juste : #bare:hover au lieu de #bare :hover et ça devrait le faire.
Mais ça ne passera pas sous IE
Bonjour,
Il faut noter que la pseudo-classe :hover ne fonctionne pas sur les élément autres que les liens sous IE.
Utiliser alors en plus de la methode CSS (pour ne pas pénaliser
les utilisateurs ayant le javascript désactivé) la methode javascript:


<div id="bare" onmouseover="this.style.backgroundColor='#F00'>
avec la methode onmouseover je passe par dessur le div ca marche mais lorsque je retire la souris ca reste toujours avec la couleur du fond qui a changé. Pourquoi ?

deplus ton code me crée des bug il maquait un " je ne sais pas ou alors je l ai rajouté à la fin et je ne sais pas si c est correct
<div id="bare" onmouseover="this.style.backgroundColor='#dfeabf'">

Modifié par xiryu (16 Nov 2006 - 11:43)
Salut,
xiryu a écrit :
avec la methode onmouseover je passe par dessur le div ca marche mais lorsque je retire la souris ca reste toujours avec la couleur du fond qui a changé. Pourquoi ?
Si tu veux que la couleur d'origine revienne, il faut que tu ajoutes un attribut onmouseout équivalent.

<edit>Oui, tu as bien fait d'ajouter le guillemé à la fin.</edit>
Modifié par Eldebaran (16 Nov 2006 - 11:44)
Bonjour,
Oui en effet j'ai omis le onmouseout désolé Smiley cligne
ghost a écrit :
Ou alors sémantiquement très incorrect, encapsuler dans des liens ...

Un <div> dans un <a> est aussi invalide.
Dans ce cas il vaut mieux utiliser la méthode des info-bulles
en appliquant un display:block a un <span> encapsulé.
Modifié par Hermann (17 Nov 2006 - 12:59)
Sujet clos
Aller à