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
}
.bigDiv2:hover > h2:not(:hover) {
color:white
}
<div class="bigDiv2">
<h2 id="txtBurgerista" class="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>
Try this:
#txtBurgerista:hover,
#txtFitGreen,
#txtMore {
color:white
}
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 class="bigDiv2">
<h2 id="txtBurgerista" class="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>
I have updated my question, because I think you misunderstood it.
I need to see how your html is setup. Are the ad elements all contained in the same parent element? Are you trying to get the style to apply to all IDs when one is hovered or only on the one being hovered?
I have updated the question with the html code. When one is hovered all others should get a color (the one which is hovered should not change)
thanks for your update! Now I have the problem that when I use the code for the other headings as well (e.g: “Ninjas”; so that all other headings except “Ninjas”change the color when the user hovers over “Ninjas”), the color of the headings above doesn´t change. Any solutions?
So I updated the code snippet. CSS is a cascading sheet, so all styles apply to elements going down the page. The update above is pure CSS. To implement styles that go up the page would need some javascript.
I have updated my question, because I think you misunderstood it.
