Mettre 1 div en couleur au changement d'1 div
Résolu
sof8901
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
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 ;)
A voir également:
- Mettre 1 div en couleur au changement d'1 div
- Changement dns - Guide
- Excel cellule couleur si condition texte - Guide
- Boite a couleur - Télécharger - Divers Photo & Graphisme
- Somme si couleur - Guide
- Changer la couleur de la barre des taches - Guide
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>
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:
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
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