Sujet Précédent Sujet Suivant

Mettre 1 div en couleur au changement d'1 div

Résolu/Fermé
sof8901 Messages postés 4 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 21 août 2012 - 16 août 2012 à 10:57
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 22 août 2012 à 10:02
Bonjour,

Je début en html et css et pour cela je m'entraîne à faire mon site.

J'ai créé une div qui contient 2 autre div. Je voudrais faire en sorte que l'une de ces div change de couleur de fond lorsque je passe ma souris sur la div principale.

Voici mon code html : 
<div id="accordion-workexperiences">
	<div class="accordionButton"><span class = "titre">WORK EXPERIENCES</span></div>
	<div class="accordionContent">


et mon css : 
#accordion-education /*()*/
{
	height: 30px;
	border: 1px solid #C03;
	overflow: hidden;
	transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-htm-transition: 1s;
	-webkit-transition: 1s;
	margin-bottom:20px;
	margin-top:20px;
}

#accordion-education:hover
{
	height: 250px;
	overflow: hidden;
	transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-htm-transition: 1s;
	-webkit-transition: 1s;
	overflow:auto;
}

.accordionButton:hover
{
	background-color:#C33;
}


Pour que ce soit plus clair, je voudrais que la div class "accordionButton" soit en fond rouge. Mais que le fond rouge n'apparaisse pas seulement lorsque ma souris est au-dessus de la div class "accordion Button". Je voudrais que le fond rouge apparaisse lorsque toute la div accordion-education est en hover.

Merci pour votre aide
A bientôt
Sophie ;)


A voir également:

5 réponses

Réponse 1 / 5
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
18 août 2012 à 14:58
Comme ça ça marche ? 
<!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>
<style type="text/css">
#accordionButton /*()*/
{
	height: 30px;
	border: 1px solid #C03;
	overflow: hidden;
	transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-htm-transition: 1s;
	-webkit-transition: 1s;
	margin-bottom:20px;
	margin-top:20px;
}

#accordion-education
{
	height: 250px;
	overflow: hidden;
	transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-htm-transition: 1s;
	-webkit-transition: 1s;
	overflow:auto;
	
	border: 1px solid #A01;
	
}


</style>
</head>
<body>
<div id="accordion-workexperiences">
	<div id="accordionButton"><span class = "titre">WORK EXPERIENCES</span></div>
	<div id="accordion-education" onmouseover="accordionButton.style.background='red';" onmouseout="accordionButton.style.background='white';">Survol souris ici</div>

</body>
</html>
1
sof8901 Messages postés 4 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 21 août 2012
21 août 2012 à 20:03
Merci pour vos indications. Mais malheureusement ça ne marche toujours pas.
Je galère un peu, je commence à me demander si je vais finir par y arriver ... :s

Si par curiosité vous voulez avoir une idée de l'endroit où je voudrais le mettre : http://www.sophieblomet.com/
Je voudrais que les titres apparaissent en fond rouge lorsque la div globale est en hover.

Merci beaucoup
Sophie
0
Réponse 2 / 5
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 21/08/2012 à 22:56
quel div global ?

si c'est celui qui correspond à chacun des titres:

par exemple pour le premier ABOUT ME

il faut que tu mettre un id différent à chaque div de titre exemple: 

<div id="accordion-aboutme"> 
    <div class="accordionButton" id="accordionButton_1" ><span class = "titre">ABOUT ME</span></div> 
 <div class="accordionContent" 
onmouseover="accordionButton_1.style.background='red';"  
onmouseout="accordionButton_2.style.background='white';"> 
   <p>I am in Australia since September 2012 with a WHV Visa (417). As I am at the beginning of my professional life, I am searching for a great work experience. 
      <br/>And I would like to do it in Australia, because I would have an international experience.  
      <br/>I am a young professional person who values are honesty, integrity and transparency. I always give 100% of myself in my work. I am highly results-motivated and I never give up. I like to work in team and I have a lot of respect for my collegues and bosses.  
      <br/>I also know that I am capable to adapt to any situation. I am confident that I can perform above and beyond your expectations.  
       <br/> 
       <br/>It's a real dream for me to be in Australia. I am really fascinated by this continent and his culture. 
       <br/>I'm sure it could be very interesting to discover you work methods and learn about your web development strategies.</p> 
 </div> 
</div> 

//pour le deuxieme: 
<div class="accordionButton" id="accordionButton_2" >><span class = "titre">WORK EXPERIENCES</span></div> 
 <div class="accordionContent"  
onmouseover="accordionButton_2.style.background='red';"  
onmouseout="accordionButton_2.style.background='white';"> 

//etc...
1
Réponse 3 / 5
sebooch Messages postés 563 Date d'inscription dimanche 25 avril 2010 Statut Membre Dernière intervention 4 janvier 2014 22
18 août 2012 à 11:45
Salut

Dans ton code html, je ne vois pas de div "accordion-education"
0
Réponse 4 / 5
sof8901 Messages postés 4 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 21 août 2012
21 août 2012 à 23:21
OUIII !! Yeah !!

Super ça a marché !!!

Milles fois merci !!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 22/08/2012 à 10:44
bien content pour toi, par contre si tu veux utiliser une palette de couleur plus étendue, à la place de red tu met le code couleur HTML hexadécimal #......

et le post mets en résolu
0

Discussions similaires

Transparence en tete et bas de page
Sabrina -
sabrina -

8 réponses
couleur personnage
Gasper -
Izzi -

9 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses