Saya menjumpai kod yang meningkatkan saiz imej apabila anda menudingnya dan imej yang dilegar tidak dipangkas oleh imej lain: TutorialRepublic.com
Tetapi apabila saya juga menaip kod ini:
img {
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
Apabila anda menuding tetikus, imej akan menjadi lebih besar dan tidak akan menjadi kelabu, tetapi ia akan bertindih antara satu sama lain. Adakah terdapat cara untuk menjadikannya berfungsi tanpa imej bertindih antara satu sama lain.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
向图像添加
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>