如何显示鼠标悬停的模糊图像的部分(小部分)？目前它模糊整个图像,但是我想要将鼠标指向的部分模糊图像显示出来.
<!doctype html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Anoop</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blur pic">
<img src="adv_logo.png" alt="plane">
</div>
</body>
</html>
CSS
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(1px);
}
解决方法
我只想发布一个替代解决方案.它没有伟大的浏览器支持,因为它建立在SVG图像,掩码和过滤器上.我已经测试,它适用于Chrome 33,Safari 6.1.1和Firefox 25.0.1.
让我知道你的想法：jsFiddle
HTML SVG
<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<image filter="url(#filter2)" xlink:href="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%"></image>
<filter id="filter2">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
</mask>
<image xlink:href="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>
CSS
body {
margin: 0;
}
.pic {
text-align: center;
position: relative;
height: 250px;
}
.blur {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
JavaScript的
$('.pic').mousemove(function (event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
var mask = $('#mask1 circle')[0];
mask.setAttribute("cy",(upY - 5) + 'px');
mask.setAttribute("cx",upX + 'px');
});
