Use CSS for more ids-CodePudding

How can I use one css code snipped for more ids? The code I tried doesn´t work. My goal is that when the user hovers over the text with the id "txtBurgerista", all the texts with the other ids should be white. But only when the user hovers id "txtBurgerista".

#txtBurgerista:hover ~ #txtFitGreen, #txtMore {
  color:white
}

<div >
        <h2 id="txtBurgerista" >Burgerista</h2>
        <h2 id="txtFitGreen">Fit Green Mind</h2>
        <h2 id="txtNinjas">Ninjas</h2>
        <h2 id="txtReinhartshuber">Reinhartshuber</h2>
        <h2 id="txtLakhis">Lakhi´s</h2>
        <h2 id="txtIndigo">my Indigo</h2>
        <h2 id="txtMore">And more</h2>
      </div>

CodePudding user response：

You can do this:

#txtBurgerista:hover, 
#txtFitGreen, 
#txtMore {
  color:white
}

I am unsure if you intended to use the hover on the first one, but if not you and do it like this instead:

#txtBurgerista, 
#txtFitGreen, 
#txtMore {
    color:white
}

To make the style apply only on hover to all the IDs:

#txtBurgerista:hover, 
#txtFitGreen:hover, 
#txtMore:hover {
    color:white
}

#txtBurgerista:hover ~ #txtFitGreen, 
#txtBurgerista:hover ~ #txtNinjas,
#txtBurgerista:hover ~ #txtReinhartshuber,
#txtBurgerista:hover ~ #txtLakhis,
#txtBurgerista:hover ~ #txtIndigo,
#txtBurgerista:hover ~ #txtMore {
  color:white
}

<div >
        <h2 id="txtBurgerista" >Burgerista</h2>
        <h2 id="txtFitGreen">Fit Green Mind</h2>
        <h2 id="txtNinjas">Ninjas</h2>
        <h2 id="txtReinhartshuber">Reinhartshuber</h2>
        <h2 id="txtLakhis">Lakhi´s</h2>
        <h2 id="txtIndigo">my Indigo</h2>
        <h2 id="txtMore">And more</h2>
      </div>

CodePudding user response：

Try this:

#txtBurgerista:hover, 
#txtFitGreen, 
#txtMore {
  color:white
}