Zac Warham Zac Warham - 3 months ago 11
CSS Question

Hover with multiple ID/Class

I have the following HTML which works:

<div class="preview">
<div class="image">
<img src="SomeFile/SomeImage.gif">
</div>
<h2>Some heading</h2>
<p>Some text</p>
</div>


And the following CSS (which works):

.preview:hover > h2 {display: none;}
.preview:hover > p {display: block;}


If I add a new
<div id="newID">
around the HTML, how do I update the CSS to work with the new ID wrapper?

Also, how do I use multiple IDs in the CSS to avoid re-writing this for each ID?

Thanks

Answer

If you need the style to be applied only to the elements that are children to the new wrapper, then you can just add the ID selector like this:

#newID .preview:hover > h2 {display: none;}

Otherwise you don't need to change anything.