Zac Warham Zac Warham - 1 year ago 85
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">
<h2>Some heading</h2>
<p>Some text</p>

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?


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download