HTML+CSS 画廊

Question

有人会告诉我为什么:悬停不检测正确的 child 只将整体视为一个元素，即使我区分了更多的 child 并且一直在同一屏幕上更改我，如何解决？当我尝试将鼠标悬停在元素“.image”上时，我需要这样做 大元素开关 z-index 为正确的元素。

在线验证码:https://jsfiddle.net/2zr6pj9u/1/

HTML

<section class="galery">
    <div class="small-img">
        <div class="image" id="numer1"><img src="https://images5.alphacoders.com/322/thumb-1920-322588.jpg" alt="obraz"></div>
        <div class="image" id="numer2"><img src="http://www.banktapet.pl/pictures/2012/0615/1/blue-ocean-sea-1600x900-wallpaper-531986.jpg" alt="obraz"></div>
        <div class="image" id="numer3"><img src="http://wrzutka.pl/files/walls/d3f32e12/x.jpg" alt="obraz"></div>
        <div class="image" id="numer4"><img src="https://a-static.besthdwallpaper.com/rocky-ocean-tapeta-3957_L.jpg" alt="obraz"></div>
    </div>
    <div class="big-img">
        <div class="big-image" id="nr1"><img src="https://images5.alphacoders.com/322/thumb-1920-322588.jpg" alt="obraz"></div>
        <div class="big-image" id="nr2"><img src="http://www.banktapet.pl/pictures/2012/0615/1/blue-ocean-sea-1600x900-wallpaper-531986.jpg" alt="obraz"></div>
        <div class="big-image" id="nr3"><img src="http://wrzutka.pl/files/walls/d3f32e12/x.jpg" alt="obraz"></div>
        <div class="big-image" id="nr4"><img src="https://a-static.besthdwallpaper.com/rocky-ocean-tapeta-3957_L.jpg" alt="obraz"></div>
    </div>
</section>

CSS

.galery {
  width: 100%;
  height: 80vh;
  margin-top: 20px;
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid black;
}
.small-img {
  display: flex;
  flex-direction: column;
  margin-right: 2px;
}
.image {
  width: 100%;
  height: 20vh;
}
img {
  width: 100%;
  height: 100%;
}
.big-img {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}
.big-image {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
}
#nr1 {
  z-index: 1;
}
#nr2 {
  z-index: 2;
}
#nr3 {
  z-index: 3;
}
#nr4 {
  z-index: 4;
}
.small-img:first-child:hover ~ .big-img #nr1 {
  z-index: 5;
}
.small-img:nth-child(2):hover ~ .big-img #nr2 {
  z-index: 5;
}
.small-img:nth-child(3):hover ~ .big-img #nr3 {
  z-index: 5;
}
.small-img:last-child:hover ~ .big-img #nr4 {
  z-index: 5;
}

Answer 1

如果不使用 Javascript，您将无法实现这一点。该问题概述如下。

有两个问题:

1. 您在错误的元素上设置了 :nth-child。 nth-child 适用于您定位的元素。在您的代码中，您始终以 .small-img div 而非 .image div 为目标 - 这正是您想要的。

CSS

.small-img .image:first-child:hover ~ .big-img #nr1{
    z-index: 5;
}
.small-img .image:nth-child(2):hover ~ .big-img #nr2{
    z-index: 5;
}
.small-img .image:nth-child(3):hover ~ .big-img #nr3{
    z-index: 5;
}
.small-img .image:last-child:hover ~ .big-img #nr4{
    z-index: 5;
}

这是您应该拥有的内容，以便您可以定位每个 .image 子级。

1. 这就是问题所在。现在我们定位正确的子 div (.image)，我们无法在 CSS 中移动到父 div (.small-img) 之外，然后定位兄弟 .big-img div。 big-img div 不是 .image div 的直接兄弟，因此我们不能定位它。

如果您想更新标记，这里有一个解决方案:

.grid-container {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 25% 75%;
  grid-template-rows: 100px 100px 100px 100px;
  grid-template-areas: "small1 big" "small2 big" "small3 big" "small4 big";
}

.grid-container .small-image:nth-child(1) {
  background: yellow;
  grid-area: small1;
}

.grid-container .small-image:nth-child(1):hover~#limage-1 {
  z-index: 10;
}

.grid-container .small-image:nth-child(2) {
  background: red;
  grid-area: small2;
}

.grid-container .small-image:nth-child(2):hover~#limage-2 {
  z-index: 10;
}

.grid-container .small-image:nth-child(3) {
  grid-area: small3;
  background: blue;
}

.grid-container .small-image:nth-child(3):hover~#limage-3 {
  z-index: 10;
}

.grid-container .small-image:nth-child(4) {
  grid-area: small4;
  background: purple;
}

.grid-container .small-image:nth-child(4):hover~#limage-4 {
  z-index: 10;
}

.grid-container .large-image {
  position: relative;
  grid-area: big;
}

.grid-container .large-image#limage-1 {
  background: yellow;
  z-index: 9;
}

.grid-container .large-image#limage-2 {
  background: red;
  z-index: 1;
}

.grid-container .large-image#limage-3 {
  background: blue;
  z-index: 1;
}

.grid-container .large-image#limage-4 {
  background: purple;
  z-index: 1;
}

<div class="grid-container">
  <div class="small-image" id="image-1"></div>
  <div class="small-image" id="image-2"></div>
  <div class="small-image" id="image-3"></div>
  <div class="small-image" id="image-4"></div>
  <div class="large-image" id="limage-1"></div>
  <div class="large-image" id="limage-2"></div>
  <div class="large-image" id="limage-3"></div>
  <div class="large-image" id="limage-4"></div>
</div>

密码本 https://codepen.io/chrislafrombois/pen/gEbLRE