Question

我试图将css动画悬停在堆叠在彼此顶部的3个图像上。悬停图像后意味着模糊。

这是我的代码

HTML：

<img class="leaves" src="leaves_01.png"/><img  class="flower" src="purple_orchid02.png"/><img  class="bird" src="bird_01.png"/>

的CSS：

img:hover {
    -webkit-filter: blur(4px); /* Chrome, Safari, Opera */
    filter: blur(4px);
}
.leaves{z-index:1;
position:absolute;}
.flower{
    z-index: 999; 
    position:absolute;
}
.bird{
    z-index: 1000;
    position:absolute;
}

我设法模糊了层鸟而不是其他人。如何分别在每一层上模糊，但当它们相互叠加时？

任何建议超过欢迎。亲切的问候，Neko

Answer 1

问题是你的鸟类图像宽度完全覆盖了其他图像，因此当你试图将鼠标悬停在那些实际上悬停在鸟图像上的图像时。你需要保存前两个没有画布的png文件，这样它们就不会干扰下面的图像。

Answer 2

所有图片都覆盖整个页面，因此只有其中一个图像可以接收悬停事件。您的z-index在这种情况下无关紧要，因为这三个图像不能分层，并且当它们的大小相同时仍然可以访问。

您需要将每张图片编辑为实际内容的大小，然后根据每张图片的大小调整图层。例如，这只鸟应该只是一只鸟的图像，每次添加3次，每只鸟单独定位。然后，可以给出最高的z-index，这样它下面的任何图像仍然可以访问。

Answer 3

如果您希望将悬停应用于所有图像 - 请使用包装，例如一个div

<div class="wrapper">
  <img class="leaves" src="leaves_01.png"/>
  <img class="flower" src="purple_orchid02.png"/>
  <img class="bird" src="bird_01.png"/>
</div>

现在添加：hover到你的包装器

.wrapper:hover { -webkit-filter: blur(4px); filter: blur(4px); }

如果你想自己处理每个图像，你可以做

.wrapper:hover .leaves { ... } 
.wrapper:hover .flower { ... }
.wrapper:hover .bird   { ... }

在悬停时z-index中模糊图像

3 个答案: