HTML+CSS图库

有人会告诉我为什么：hover没有检测到正确的子元素，只将整个元素视为一个元素，即使我区分了更多的子元素并一直更改同一屏幕，如何修复它？ 当我尝试在一个元素上使用鼠标时，我需要这样做。图像大元素将z-index切换为正确的元素

联机代码：

HTML

---

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

有两个问题：

您在错误的元素上有：n个子元素。第n个子元素应用于目标元素。在您的代码中，您总是以.small img div而不是.image div为目标-这正是您想要的。 CSS

这就是你应该拥有的，这样你就可以瞄准每一个孩子

问题出在这里。既然我们以正确的子div.image为目标，我们在CSS中就没有办法移动到父div.small img之外，然后再以兄弟.big img div为目标。big img div不是.image div的直接兄弟，所以我们无法将其作为目标。 如果要更新标记，请使用以下解决方案： .网格容器{ 显示：网格； 网格间距：0； 网格模板柱：25%75%； 网格模板行：100px 100px 100px 100px； 网格模板区域：small1大small2大small3大small4大； } .grid容器。小图像：nth-child1{ 背景：黄色； 网格面积：1； } .grid容器。小图像：nth-child1:hover~limage-1{ z指数：10； } .grid容器。小图像：nth-child2{ 背景：红色； 网格面积：2平方米； } .grid容器。小图像：nth-child2:hover~limage-2{ z指数：10； } .grid容器。小图像：nth-child3{ 网格面积：小3； 背景：蓝色； } .grid容器。小图像：nth-child3:hover~limage-3{ z指数：10； } .网格容器。小图像：nth-child4{ 网格面积：4个； 背景：紫色； } .grid容器。小图像：nth-child4:hover~limage-4{ z指数：10； } .网格容器.大图像{ 位置：相对位置； 网格面积：大； } .网格容器。大型图像图像LIMAGE-1{ 背景：黄色； z指数：9； } .网格容器。大型图像图像图像图像-2{ 背景：红色； z指数：1； } .网格容器。大型图像Limage-3{ 背景：蓝色； z指数：1； } .网格容器。大型图像Limage-4{ 背景：紫色； z指数：1； }

---

我真的不明白问题出在哪里。你能详细解释一下吗当我从左侧的列中选择“小图像”，然后从右侧选择“大图像”时，必须在更大的窗口中显示该图像。如果我能做到这一点，我必须重建HTML并使用css网格？@DawidRuciński是的，你可以重建HTML和css以使用网格。我已经更新了我的答案，并添加了一个代码笔，这样你就可以看到它的作用。

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

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

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