在懸停/影片時影響CSS中的z-index-有解無憂

我正在嘗試創建一個畫廊頁面，其中元素在懸停時被放大。這會導致一些影像重疊，這意味著我需要懸停元素來增加 z-index。

#gallery-frame {
  display: inline-block;
  position: absolute;
  z-index: 0;
  filter: drop-shadow(0 0 0.75rem crimson);
}

#gallery-img {
  position: absolute;
  z-index: 1;
  width: 100%;
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#gallery-img img {
  width: 100%;
}

#gallery-frame:hover>#gallery-img {
  transform: scale(1.5);
  z-index: 999;
}

<body>
    <div class="gallery">
        <div id="gallery-frame" style="
            top:  10vw;
            left: 10vw;
            width:20vw;
        ">
            <div id="gallery-img">
                <img src="../img/dreaming.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
            
            
        </div>
        
        <div id="gallery-frame" style="
            top:  10vw;
            left: 50%;
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            width:30vw;
        ">
            <div id="gallery-img">
                <img src="../img/bearcanfresh.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
        <div id="gallery-frame" style="
            top:  10vw;
            left: 70vw;
            width:20vw;
        ">
        
            <div id="gallery-img">
                <img src="../img/cya.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
        <div id="gallery-frame" style="
            top:  40vw;
            left: 10vw;
            width:20vw;
        ">
            <div id="gallery-img">
                <img src="../img/dreaming.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
        <div id="gallery-frame" style="
            top:  40vw;
            left: 50%;
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            width:30vw;
        ">
            <div id="gallery-img">
                <img src="../img/bearcanfresh.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
        <div id="gallery-frame" style="
            top:  40vw;
            left: 70vw;
            width:20vw;
        ">
        
            <div id="gallery-img">
                <img src="../img/cya.png">
                
                <div id="gallery-desc">
                    lorem ipsum
                </div>
            </div>
        </div>
        
    </div>
</body>

這是目前發生的事情

這是想要的效果，雖然只是因為這個影像在 HTML 中較低，而不是使用 z-index

uj5u.com熱心網友回復：

使用類而不是ID，然后設定z-index的.gallery-frame不是.gallery-img這樣，而不是這樣的：

.gallery-frame:hover > .gallery-img {
  transform: scale(1.5);
  z-index: 999;
}

做這個：

.gallery-frame:hover {
  z-index: 999;
}

.gallery-frame:hover > .gallery-img {
  transform: scale(1.5);
}

例子：

.gallery-frame {
  display: inline-block;
  position: absolute;
  filter: drop-shadow(0 0 0.75rem crimson);
}

.gallery-img {
  position: absolute;
  width: 100%;
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.gallery-img img {
  width: 100%;
}

.gallery-frame:hover {
  z-index: 999;
}

.gallery-frame:hover>.gallery-img {
  transform: scale(2.5);
}

<div class="gallery">
  <div class="gallery-frame" style="top: 5vw; left: 13vw; width: 20vw">
    <div class="gallery-img">
      <img src="https://www.gravatar.com/avatar/79c9e7af0ce8efbc35e8210afcbad65b?s=64&d=identicon&r=PG" />

      <div class="gallery-desc">lorem ipsum</div>
    </div>
  </div>

  <div class="gallery-frame" style="
          top: 5vw;
          left: 50%;
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 20vw;
        ">
    <div class="gallery-img">
      <img src="https://i.stack.imgur.com/80JXf.jpg?s=48&g=1" />

      <div class="gallery-desc">lorem ipsum</div>
    </div>
  </div>

  <div class="gallery-frame" style="top: 5vw; left: 68vw; width: 20vw">
    <div class="gallery-img">
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mC8R1E38jitP-O2nZmVOFK80shuPc_BB7dMmsQV=k-s64" />

      <div class="gallery-desc">lorem ipsum</div>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386924.html

標籤：css z-索引

上一篇：如何使用JS洗掉/關閉Div？

下一篇：在Alert組件中使用Skeleton的問題