小编And*_*kov的帖子

我想在网页上有一个图像,它在鼠标悬停时变得透明,但只在最靠近鼠标指针的某个区域透明,用指针移动该区域.

使用CSS可以轻松实现简单的不透明度转换:

    <style type="text/css">
        img.transparent {
            opacity: 1;
            -webkit-transition: opacity 1s;
            -moz-transition: opacity 1s;
            transition: opacity 1s;
        }
        img.transparent:hover {
            opacity: 0;
        }
    </style>
    <img class="transparent" src="1.jpg">

这使得图像在鼠标上很好地消失并且在鼠标上显示出来.

但我想要实现的只是鼠标指针附近某些区域的效果相同.因此,当指针在图像上移动时,指针下总是会有透明区域.

有没有办法用CSS或JS实现这一目标？

谢谢!