Javascript 你是如何创造的；“光环”；鼠标指针的效果？

如果打开google chrome并打开多个选项卡，将鼠标悬停在背景选项卡上即可看到效果。指针将有一个“光环”效果，它会跟随指针

为了澄清这一点，我不是在问如何使整个选项卡发出更亮的颜色，我是在问如何使指针在指定半径内产生效果

$('some_element').hover(function(){
    $(this).css('opacity','.5');
},function(){
    $(this).css('opacity','.2');
});

差不多吧

---

Fiddle:

关键部分是获取鼠标坐标，然后使用这些坐标放置径向渐变

var originalBG = $(".nav a").css("background-color");

$('.nav li:not(".active") a').mousemove(function(e) {
    x = e.pageX - this.offsetLeft;
    y = e.pageY - this.offsetTop;
    xy = x + " " + y;
    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
    bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

    $(this)
        .css({background: bgWebKit})
        .css({background: bgMoz});
    }).mouseleave(function() {
    $(this).css({
        background: originalBG
    });
});

像那样的东西就行了

查看著名的Chris Coyier的演示：

一些想法--

使用javascript将绝对定位的半透明png放置在光标位置下

创建一个.cur文件，用你自己的光标和它下面的半透明光晕，希望浏览器可以渲染它

用javascript替换整个游标

---

为什么没有人想到提到CSS3转换？使用CSS3，您可以使用纯css创建此效果，无需flash或javascript

这里有一个简单的例子

#auraThingy{
  height:50px;
  width:200px;
  background:blue;
  transistion:background 3s;
  -webkit-transition:background 3s; /*safari/chrome*/
  -moz-transition:background 3s;  /*firefox*/
  -o-transition:background 3s;  /*opera*/
}
#auraThingy:hover{
  background:lightblue;
}

我在这里找到了一个很好的信息链接

编辑[刚刚意识到我应该在回答之前阅读你的全部帖子，我的错^-^

---

您可能仍然可以使用渐变图像的过渡，并在悬停时使用鼠标位置更新背景图像坐标：//

在看到此问题之前，我还没有意识到光环效果！我不知道该站点存在…非常感谢。非常有用使用此过渡没有任何意义，因为鼠标移动很慢无论如何（你通常不能让你的鼠标指针从一个地方跳到另一个地方）。a）这不是他要求的，b）即使是这样，这也不需要任何jQuery，它可以用纯CSS来完成，使用

：hover

伪类，在浏览器中至少支持了10年。