HTML

Question

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

http://amitoooldforclubbing.co.uk/

我对图片没有任何问题：

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;
}

由于詹姆斯

Answer 1

您只是忘了将iframe上的悬停过滤器灰度设置回0：-webkit-filter: grayscale(0%);。在您的网站上测试它现在可以正常工作。但是，您可能希望添加一个类，该类在点击时将灰度设置为0，因为在视频播放时您将丢失iframe颜色。此外，万一您可能不知道-webkit-filter仅供某些现代浏览器使用：http://caniuse.com/#feat=css-filters

Answer 2

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

更广泛

这样的事情：

注意：如果div让视频太难看，你可以用jquery做同样的事情，只需用你的display: none替换dipslay: block和greyscale()并斧头额外的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

的文档

悬停效果对iframe

2 个答案:

HTML

CSS

的Jquery