如何通过鼠标指针创建“光环”效果？

Question

如果您打开谷歌浏览器并打开多个标签，则将鼠标悬停在背景标签上即可看到效果。指针将具有跟随其的“光环”效果。

为了澄清，我不是在问如何使整个选项卡发出更浅的颜色，而是在如何在其指定的半径内赋予pointer效果。

Answer 1

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

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）看这个演示：http://css-tricks.com/examples/MovingHighlight/

Answer 2

一些想法-

1. 使用JavaScript将绝对定位的半透明png放在光标位置下
2. 使用您自己的光标和一些半透明的光晕创建一个.cur文件，并希望浏览器可以渲染它。
3. 用javascript替换整个光标

Answer 3

为什么没人想到提到CSS3过渡？使用CSS3，您可以使用纯CSS来创建此效果，而无需使用Flash或JavaScript。

这是ya的一个简单示例：D

#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;
}

我在http://www.w3schools.com/css3/css3_transitions.asp找到了一个不错的信息链接

编辑[刚刚意识到我应该在回答之前先阅读您的整个帖子，我的错^-^您可能仍然可以将渐变与渐变图像一起使用，并在悬停时使用鼠标位置更新背景图像坐标：/

Answer 4

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

类似的东西。

小提琴：http://jsfiddle.net/maniator/Sf92n/