国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<nav id="qyio2"></nav>

文章專題 AI工具學(xué)習(xí) 下載問答源碼最近更新

PHP

會員中心講師中心微信公眾號

變換和過濾圖像導(dǎo)致疊加

P粉276876663 2023-09-15 20:58:43

[HTML討論組]

1407

舉報

我發(fā)現(xiàn)一個代碼可以在您懸停時增加圖像的大小，并且懸停的圖像不會被其他圖像裁剪：教程共和國.com

但是當(dāng)我也輸入這段代碼時：

img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

當(dāng)您將鼠標(biāo)懸停時，圖像會變大并且不會變灰，但圖像會相互疊加。有沒有辦法讓它在圖像不相互疊加的情況下工作。

P粉276876663

全部回復(fù)(1)

P粉6499901632023-09-16 15:47:02 1樓

向圖像添加 position:relative 并更改懸停時的 z-index ，以便圖像與其他圖像重疊。這是使用變量的示例：

ul {
   list-style: none;
   display: flex;
   gap: 1rem;
}

img {
    --grayscale: 100%;
    --zindex: 1;
    --scale: 1;
    --radius: 0;

    inline-size: 125px;
    aspect-ratio: 1;

    transition: filter .5s ease-in-out;
    filter: grayscale(var(--grayscale));
    transform: scale(var(--scale));
    box-shadow: 0 0 var(--radius) rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: var(--zindex);
}

a:hover img {
    --grayscale: 0;
    --zindex: 2;
    --scale: 1.5;
    --radius: 10px;
}

<ul>
  <li>
    <a href="#">
      <img src="https://picsum.photos/200/200?v=1" alt="...">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://picsum.photos/200/200?v=2" alt="...">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://picsum.photos/200/200?v=3" alt="...">
    </a>
  </li>
</ul>