【问题标题】：Hover Effect On Iframeiframe 上的悬停效果
【发布时间】：2016-01-05 02:37:45
【问题描述】：

我正在创建一个单调的 Wordpress 博客，其中图像和 iframe (Youtube) 在悬停时从单调变为彩色。

图片没问题：

img {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

img:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

这很好用。

但是，当我尝试对 iframe 执行相同操作时，它不起作用。将其更改为灰度可以 - 但悬停效果不起作用。

有什么想法吗？

iframe {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

iframe:hover {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}

谢谢詹姆斯

【问题讨论】：

标签： wordpress css iframe

【解决方案1】：

您只是忘记将 iframe 上的悬停过滤器灰度设置回 0：-webkit-filter: grayscale(0%);。在您的网站上对其进行了测试，现在可以使用。但是，您可能还想添加一个在单击时将灰度设置为 0 的类，因为在视频悬停时播放时您会丢失 iframe 颜色。另外，以防万一您可能不知道 -webkit-filter 仅被某些现代浏览器使用：http://caniuse.com/#feat=css-filters

【讨论】：

非常感谢 - 简单的事情的次数太荒谬了！成为初学者的危险。

【解决方案2】：

我会在你的 iframe 中创建另一个空 div，用不透明度将其着色为灰色，并将其定位在绝对左上角和右下角 0，因此它的大小与你的 iframe 相同。然后，使用javascript将mouseenter和mouseleave上的div更改为不显示，分别显示块。是的，它需要另一个 DOM 元素，但它比 grayscale() 得到更广泛的支持

所以是这样的：

注意：如果 div 让视频太难看，你可以用 jquery 做同样的事情，只需用你的 greyscale() 替换 display: none 和 dipslay: block 并去掉多余的 div 标签

HTML

<iframe>
  <div>
  </div>
</iframe>

CSS

iframe{
    position: relative; //this is important so the position absolute references the iframe
}
div{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}

jQuery

document.ready(function(){
    $('iframe').mouseenter(function(){
        $('div').css('display', 'none');
    });
    $('iframe').mouseleave(function(){
        $('div').css('display', 'block');
    });
});

这是mouseenter 和mouseleave 的文档

【讨论】：