如果您想更新标记，请使用以下解决方案：

Question

有人会告诉我原因：即使我识别出更多的孩子并一直在改变同一屏幕的情况下，悬停并没有检测到正确的孩子仅将整个元素视为一个要素，如何解决呢？当我尝试将鼠标悬停在元素“ .image”大元素开关的z-index上时，我需要这样做。

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

不使用Java脚本就无法实现此目的。问题概述如下。

有两个问题：

您在错误的元素上输入了: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孩子。

这是问题所在。现在我们定位到正确的子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>

Codepen https://codepen.io/chrislafrombois/pen/gEbLRE

HTML + CSS画廊

1 个答案:

如果您想更新标记，请使用以下解决方案：