CSS class:hover select all other elements

css, css-selectors, html

Solution

If you want to hide all succeeding image elements, use the general sibling combinator, `~`.

.txt:hover ~ img {
   display:none;
}

EXAMPLE HERE

You were using the adjacent sibling combinator, `+`, which will only hide the adjacent element.

Problem

I can't find how to do this online, how do I go about selecting any elements within a element and apply styles to them. For example: HTML: ``` <div class="cont"> <div class="txt">Hello World!</div> <img src="img1.jpg"> <img src="img2.jpg"> </div> ``` CSS: ``` .txt:hover + img { display:none; } ``` I want that class style to hide ALL images next to it. It only hides ONE image at the moment though...

Original source