html - 如何添加过渡到 .class :not(:hover)?

Question

我一直在研究一个悬停画廊，一旦其中一个元素被悬停，它就会增长到整个画廊的大小，而其他所有内容都设置为不透明度:0 和高度:0。在其任何位置添加过渡class 或 gallery-wrap 不起作用，也没有任何效果。我必须把它放在哪个类(class)才能按预期工作？

我已经尝试过转换:10 秒，但到目前为止它在任何地方都不起作用。

HTML:

          <div class="gallery-wrap">
            <div class="gallery-item" style="--n: 0">
              <div style="background-image: url(assets/images/first.jpg);" class="gallery-part"></div>
              <p>First</p>
            </div>
            <div class="gallery-item" style="--n: 1">
              <div style="background-image: url(assets/images/second.JPG);" class="gallery-part"></div>
              <p>Second</p>
            </div>
            <div class="gallery-item" style="--n: 2">
              <div style="background-image: url(assets/images/third.jpeg);" class="gallery-part"></div>
              <p>Thir</p>
            </div>
            <div class="gallery-item" style="--n: 3">
              <div style="background-image: url(assets/images/fourth.jpg);" class="gallery-part"></div>
              <p>Fourth</p>
            </div>
            <div class="gallery-item" style="--n: 4">
              <div style="background-image: url(assets/images/fifth.jpg);" class="gallery-part"></div>
              <p>Fifth</p>
            </div>
            <div class="gallery-item" style="--n: 5">
              <div style="background-image: url(assets/images/sixth.jpg); --n: 5" class="gallery-part"></div>
              <p>Sixth</p>
            </div>
          </div>

SCSS:

.gallery-wrap{
  width: 28vw;
  height: 48vh;
  overflow: hidden;
  .gallery-part{
    transition: .8s;
    overflow: hidden;
    height: 8vh;
    background-size: cover;
    opacity: .1;
    filter: grayscale(100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 250%);
  }
  p{
    padding-left: 2%;
    position: fixed;
    margin-top: 0;
    transform: translateY(-8vh);
  }
  &:hover{
    > .gallery-item:not(:hover){
      opacity: 0;
      height: 0;
    }
    > .gallery-item{
      &:hover{
        height: 48vh;
      }
    }
  }
}

.gallery-item{
  &:hover{
    height: 0;
    > .gallery-part{
      opacity: 1;
      height: 48vh;
      filter: none;
    }
  }
}

应该是平滑过渡，而不是跳跃式过渡。因此，除了悬停的那个之外，所有画廊元素的高度应该缓慢移动到 0，而悬停的元素应该增长到画廊包装的大小。谢谢您的帮助! :)

Answer 1

你的 .gallery-item 元素从一个未指定的高度跳到 height: 0; 没有任何过渡。

所以如果你稍微修改你的 .gallery-item 选择器，你应该得到你想要的:

.gallery-item {
    height: 8vh; /* New */
    transition: 0.8s; /* New */

  &:hover {
    height: 0;

    > .gallery-part {
      opacity: 1;
      height: 48vh;
      filter: none;
    }
  }
}