css hover div1.img1影响另一个div2.img2

Question

css hover div1.img1影响另一个div2.img2

.img1:hover + .i1 {
  display: none
}

<article>

  <div class="bigimg">
    <img id="hauptimg" class="i4" style="position: absolute" src="imgs/k2.jpg" width="394px" height="309px">
    <img id="hauptimg" class="i3" style="position: absolute" src="imgs/k1.jpg" width="394px" height="309px">
    <img id="hauptimg" class="i2" style="position: absolute" src="imgs/big.jpg" width="394px" height="309px">
    <img id="hauptimg" class="i1" style="position: absolute" src="imgs/big2.jpg" width="394px" height="309px">
    <div class="clear"></div>
  </div>
  <div class="smallimg">
    <img id="secondimg" class="img1" src="http://www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg" width="100px" height="100px">
    <br>
    <img id="secondimg" class="img2" src="http://www.bilder-upload.eu/upload/fd6130-1467583927.jpg" width="100px" height="100px">
    <br>
    <img id="secondimg" class="img3" src="http://www.bilder-upload.eu/upload/a2888b-1467583968.jpg" width="100px" height="100px">
  </div>

</article>

+，>，~无效

Answer 1

你的代码有一些错误：

• 你不能有重复的ID，他们必须是唯一的。
• 你不应该有内联样式。
• 您不应使用width / height HTML标记，而应使用CSS样式。

要实现这一点（考虑到图像中显示的当前布局，您必须使用JS，因为CSS没有父选择器。

您可以使用flexbox实现布局。

$(".thumbs img").hover(function() {
  var src = $(this).attr("src");
  $("#hauptimg").attr("src", src);
});

article {
  display: flex;
  position: relative;
  width: 500px
}
.thumbs {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0
}
.thumbs img {
  width: 100px;
  margin: 0 10px
}
.preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  border: 1px red solid
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <div class="preview">
    <img id="hauptimg" src="//www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg" />
  </div>
  <div class="thumbs">
    <img id="secondimg1" class="img1" src="http://www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg">
    <img id="secondimg2" class="img2" src="http://www.bilder-upload.eu/upload/fd6130-1467583927.jpg">
    <img id="secondimg2" class="img3" src="http://www.bilder-upload.eu/upload/a2888b-1467583968.jpg">
  </div>
</article>