Question

鼠标悬停在Image上我需要圆形的unblur图像效果。喜欢： enter link description here（背景）

Angular解决方案很完美，但jQuery或原生JS也可以。有什么想法吗？

我在下面找到了解决方案，但在某些浏览器中无效（（在IE 11中图像不模糊。

$("body").on("mousemove", function(event) {
 $("#blurarea").css({
    top: event.clientY - 75,
    left: event.clientX - 75
  });
});

html, body { height: 100%; }
body { -webkit-transform: translate3D(0,0, 1px); }
.softarea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
  -webkit-filter: blur(8px);
  filter: grayscale(0.5) blur(10px);
  /*firefox only*/
  filter:url(#example);
}

.blurarea {
  width: 150px;
  height: 150px;
  border: 1px solid #fff;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
  background-attachment: fixed;
  border-radius: 50%;
  position: absolute;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
  

  <body>
<div id="softarea" class="softarea"></div>
<div id="blurarea" class="blurarea"></div>
    
    <svg:svg>
		<svg:filter id="example">
			<svg:feGaussianBlur stdDeviation="2"/>
   		 </svg:filter>
	</svg:svg>
</body>

</html>

如何通过鼠标悬停实现单块图像效果？

0 个答案: