Эффект наведения на iframe

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

Я бы создал еще один пустой div внутри вашего iframe, покрасьте его серым с непрозрачностью и поместите его в абсолютное верхнее нижнее левое и правое 0, поэтому это тот же размер, что и ваш iframe. Затем используйте javascript, чтобы изменить div на mouseenter и mouseleave, чтобы отобразить их, чтобы отобразить блок с уважением. Да, требуется другой 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