CSS class:hover select all other elements

Question

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...

Answer 1

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.

Answer 2

You can do this in two ways; With CSS-only, and with jQuery:

CSS-way:

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

jQuery-way:

$(function() {

   $('.txt').hover(function() {
      $('img').toggle();
   });

});