css - 如何实现鼠标移上去的时候一个div元素模糊变清晰

Question

有点类似于word2007里面的那个鼠标跟随面板一样的功能，就是计算鼠标离元素的距离，距离越近元素越清晰，反之越模糊，如何实现？

PHPz · Answer

參考mouseenter事件方法。 mouseenter 參考範例如下

$('p').mouseenter(function(){    
    $(this).animate({
        opacity:0
    
    });
});

伊谢尔伦 · Answer

1.就一兩個圖片的：做一張模糊的圖片，放在上邊控制他的透明度就可以了唄）；
2.好多圖片的：你可以看一下blur.js這個東西，用它製作模糊之後的圖片放在上邊，控制他的透明度；（不過這個東西比較耗資源，圖片太多了會很慢）。

天蓬老师 · Answer

不知道我理解的是不是跟上面回答的不一樣。

我認為你的要求是，透過滑鼠的位置，和元素的中心點，來做比對，然後確認一個規則，模糊你的元素。