PROMULGATOR

    逆商

    天津市
    Html
    Css
    Js
1
2
3
4
<img id="ii" src="http://www.jq22.com/img/cs/500x300b.png" width="200">
<div id="ii2" style="width: 500px;height: 600px;background: red;">
    <h1 style="color: white;text-align: center;">移动到上面图片，让我变模糊</h1>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
#ii2 {
    transition:all 2s;
}
.modal-active {
    -webkit-filter:blur(3px);
    -moz-filter:blur(3px);
    -o-filter:blur(3px);
    -ms-filter:blur(3px);
    filter:blur(3px);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$('#ii').hover(function() {
    $('#ii2').addClass('modal-active')
}, function() {
    $('#ii2').removeClass('modal-active')
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

触摸元素使其他元素变模糊纯CSS3

这个代码可以很好的使用 transition过渡CSS3变化

0