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

Question

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

Answer 1

Refer to the mouseenter event method. The mouseenter reference example is as follows

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

Answer 2

1. For one or two pictures: make a blurry picture and put it on top to control its transparency);
2. For many pictures: you can take a look at blur.js , use it to create a blurred picture and put it on top to control its transparency; (but this thing consumes more resources, and too many pictures will be very slow).

Answer 3

I don’t know if my understanding is different from the answer above.

I think your requirement is to compare the position of the mouse with the center point of the element, and then confirm a rule to blur your element.