HTML+CSS画廊

Question

有人会告诉我为什么:悬浮并不能检测到正确的子元素，只将整个子元素作为一个元素来处理，即使我已经区分了更多的子元素，并且一直在更改相同的屏幕，如何修复它呢？当我试图在".image“大元素上鼠标切换右元素的z-索引时，我需要这样做。

在线代码：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>

​

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