CSS类：悬停选择所有其他元素

Question

我无法在网上找到如何做到这一点，如何选择元素中的任何元素并将样式应用于它们。例如：

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;
}

我希望该类样式隐藏它旁边的所有图像。目前它只隐藏了一张图片......

Answer 1

如果要隐藏所有后续图像元素，请使用general sibling combinator, ~。

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

EXAMPLE HERE

您使用的是adjacent sibling combinator, +，它只会隐藏相邻元素。

Answer 2

你可以用两种方式做到这一点;仅使用CSS，使用jQuery：

<强> CSS-方式：

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

<强> jQuery的方式：

$(function() {

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

});