HTML/CSS - Transition Selector

Question

Ich habe ein Setup wie folgt aus:

<div id="wrapper"> 
    <div id="inner_01"></div> 
    <div id="inner_02"></div> 
    <div id="inner_03"></div> 
</div> 

Und ich möchte einen Übergang mit den folgenden Eigenschaften bauen:

1. Wenn über inner_01 die background-color von inner_02 schwebt und inner_03 sollte sich ändern.
2. Wenn Sie über inner_02 schweben, sollte sich die background-color von inner_01 und inner_03 ändern.
3. Wenn Sie über inner_03 schweben, sollte sich die background-color von inner_01 und inner_02 ändern.

Dies ist mein aktueller Ansatz:

• Hover über inner_01:

  #wrapper #inner_01:hover ~ #inner_02 { 
      /* Transition * 
      transition: background 5s; 
  
      /* Color */ 
      background: #ffee00; 
  } 
  
  /* Don't know how to effect inner_03 */ 
  

• Hover über inner_02:

  #wrapper #inner_02:hover ~ #inner_03 { 
      /* Transition * 
      transition: background 5s; 
  
      /* Color */ 
      background: #ffee00; 
  } 
  
  /* Don't know how to effect inner_01 */ 
  

• Hover über inner_03:

  /* Don't know how to effect inner_01/inner_02 */ 
  

Ich glaube, ich bin eine Art von CSS-Selektor fehlt ... Danke für die Hilfe :)

Answer 1

Schreiben Sie es aus, dies würde so etwas in JavaScript (ohne Bibliotheken) erfordern.

document.getElementById('inner_02').addEventListener("mouseenter", function(event) { 
 
    document.getElementById('inner_01').classList.add('newbkgnd'); 
 
}); 
 

 
document.getElementById('inner_02').addEventListener("mouseleave", function(event) { 
 
    document.getElementById('inner_01').classList.remove('newbkgnd'); 
 
}); 
 

 
document.getElementById('inner_03').addEventListener("mouseenter", function(event) { 
 
    document.getElementById('inner_01').classList.add('newbkgnd'); 
 
    document.getElementById('inner_02').classList.add('newbkgnd'); 
 
}); 
 

 
document.getElementById('inner_03').addEventListener("mouseleave", function(event) { 
 
    document.getElementById('inner_01').classList.remove('newbkgnd'); 
 
    document.getElementById('inner_02').classList.remove('newbkgnd'); 
 
});

/* make the divs visible initially. Just for debugging purposes */ 
 
#wrapper > div { 
 
width: 20em; height: 2em; 
 
margin:.5em 0; 
 
    border:1px solid; 
 
    /* Transition */ 
 
    transition: background-color .5s; 
 
} 
 

 
#inner_01:hover ~ #inner_02, 
 
#inner_01:hover ~ #inner_03, 
 
#inner_02:hover ~ #inner_03, 
 
.newbkgnd { 
 
    /* Color */ 
 
    background-color: #ffee00; 
 
}

<div id="wrapper"> 
 
    <div id="inner_01"></div> 
 
    <div id="inner_02"></div> 
 
    <div id="inner_03"></div> 
 
</div>

Edit: oder, natürlich, basierend auf @ nicael Antwort, diese viel einfacher CSS-only Lösung ...

/* make the divs visible initially. Just for debugging purposes */ 
 
#wrapper > div { 
 
width: 20em; height: 2em; 
 
margin:.5em 0; 
 
    border:1px solid; 
 
    /* Transition */ 
 
    transition: background-color .5s; 
 
} 
 

 
#wrapper:hover > div { 
 
    /* Color */ 
 
    background-color: #ffee00; 
 
} 
 
#wrapper:hover > div:hover { 
 
    background-color: inherit; 
 
}

<div id="wrapper"> 
 
    <div id="inner_01"></div> 
 
    <div id="inner_02"></div> 
 
    <div id="inner_03"></div> 
 
</div>

Answer 2

Sie können das ändern Farbe aller inner_* divs und dann zurück zu schwarz die Farbe von schwebte inner_* div.

#wrapper:hover{ 
 
    color:red; 
 
} 
 
[id^=inner]:hover{ 
 
    color:black; 
 
}

<div id="wrapper"> 
 
    <div id="inner_01">test1</div> 
 
    <div id="inner_02">test2</div> 
 
    <div id="inner_03">test3</div> 
 
</div>