如何同时加载 2 个悬停效果答案

【问题标题】：how to load 2 hover effects at the same time如何同时加载 2 个悬停效果
【发布时间】：2013-06-21 15:55:02
【问题描述】：

我有很多图像，它们在悬停时都会产生相同的效果，所以我做了分层。 I 是图像，一个是悬停效果。 http://jsfiddle.net/jmXdh/13/

所以在悬停第二层加载时，我也想对主图像产生影响。仅在悬停时。正如你所看到的，我给它添加了灰度效果。但在悬停时，两个悬停不会同时加载。这是为什么呢？

这是我在主图像悬停时得到的：

a:hover .img{-webkit-filter: grayscale(100%);}

我也会在过渡时发生。

【问题讨论】：

【解决方案1】：

您需要向 .play 类添加一个正的 z-index 值，以确保在应用过滤器时该元素不会被推到图像后面。

【讨论】：

【解决方案2】：

任何 webkit css 仅适用于支持 webkit 的浏览器

双悬停效果生效。

我通过稍微改变 css 来测试它：

a:hover img{border:2px solid #F00;}

【讨论】：