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

【问题标题】：How do you create "aura" effect from the mouse pointer?如何通过鼠标指针创建“光环”效果？
【发布时间】：2011-08-19 14:58:13
【问题描述】：

如果您打开 google chrome 并打开多个标签，您可以通过将鼠标悬停在背景标签上看到效果。指针将有一个“光环”效果跟随它。

为了澄清，我不是在问如何使整个标签的颜色变浅，我是在问如何在指针的某个指定半径内赋予其效果。

【问题讨论】：

看到这个问题之前我还没有意识到光环效果！

标签： javascript jquery html css mouseover

【解决方案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/

【讨论】：

我不知道该网站存在...非常感谢。很有帮助

【解决方案2】：

一些想法——

使用javascript在光标位置下放置一个绝对定位的半透明png
用你自己的光标创建一个 .cur 文件，在它下面有一些半透明的发光，希望浏览器可以渲染它
用 javascript 替换整个光标

【讨论】：

【解决方案3】：

为什么没有人想到提到 CSS3 过渡？使用 CSS3，您可以使用纯 css 创建这种效果，无需 flash 或 javascript。

这是一个简单的例子：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

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

【讨论】：

使用过渡没有任何意义，因为无论如何鼠标移动都很流畅（通常不能让鼠标指针立即从一个地方跳到另一个地方）。

【解决方案4】：

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

类似的东西。

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

【讨论】：

a) 这不是他问的，b) 即使是这样，也不需要任何 jQuery，它可以用纯 CSS 完成，使用 :hover 伪类至少在过去 10 年里，浏览器一直支持它。