当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Css blur not working well with iframe content

问题描述:

I have a portfolio site here:

http://benliger.webatu.com/

i had added a blur effect when you hover over the header so that it blurs out the content in all the body containers. It seems to work fine on all pages apart from the one entitled music. When you bring up the music content and move the mouse quickly over the header section then out, the iframes (the soundcloud song ones) seems to move right out of their container to the top left of the page

Is there a way to fix this? Only started happening when i added a css transition to the blur. Also the effect does not work on firefox even when using the -moz webkit...

Here is the code:

Div that is added to the container to make it blur out

.elementhovered {

-webkit-filter: blur(5px);

transition: all 0.5s ease-in-out;

-moz-transition:all 0.5s ease-in-out;

-o-transition:all 0.5s ease-in-out;

}

Jquery function to insert blur (element hovered class)

$(".header").hover(

function () {

$('.homecontainer,.aboutcontainer,.contactcontainer,.musiccontainer,.portfoliocontainer,.backgroundimage').addClass('elementhovered').addClass('elementhovered');

},

function () {

$('.homecontainer,.aboutcontainer,.contactcontainer,.musiccontainer,.portfoliocontainer,.backgroundimage').removeClass('elementhovered').removeClass('elementhovered');

}

);

Thanks,

Be

分享给朋友:
您可能感兴趣的文章:
随机阅读: