html - 带有绝对元素的悬停过渡

我有一个图像，该图像的绝对位置位于其顶部。当图像悬停在上方时，我会有过渡效果，但是当链接悬停在上方时，它们会丢失。

的HTML

<div class="imagediv">
    <img src="#">
    <a href="#">Text</a>
</div>

的CSS

.imagediv img {
  transition: transform 0.2s linear;
}
.imagediv img:hover{
  transform: scale(1.2);
  filter: grayscale(50%);
}

.imagediv a {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

如何使链接悬停保留我对图像悬停的效果？

最佳答案

更改CSS选择器，使其在.imagediv而不是img本身悬停时触发。

.imagediv img {
    transition: transform 0.2s linear;
}
.imagediv:hover img {
    transform: scale(1.2);
    filter: grayscale(50%);
}