Mettre 1 div en couleur au changement d'1 div
Résolu
sof8901
Messages postés
4
Statut
Membre
-
Alain_42 Messages postés 5413 Statut Membre -
Alain_42 Messages postés 5413 Statut Membre -
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 :
et mon css :
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 ;)
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 ;)
5 réponses
-
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>-
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
-
-
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... -
-
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
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
