如何为Raphael元素添加和删除辉光? [英] How to add and remove glow for Raphael element?

问题描述

我试图为raphael元素设置一个悬停，以便当鼠标位于该元素上时，它会发光，而当鼠标离开时，该发光将被删除.我已经弄清楚了如何添加光晕，但是在移除它时遇到了麻烦.这是我的脚本的样子:

I am trying to set up a hover for a raphael element so that when the mouse is on the element, it has a glow and when the mouse leaves, the glow is removed. I have figured out how to add the glow, but I am having trouble removing it. Here is what my script looks like:

$(document).ready(function() {
    var paper = Raphael(0,0,360,360);
    var myCircle = paper.circle(180,180,30).attr('stroke','#FFF');
    myCircle.hover(function() {
        myCircle.glow().attr('stroke','#FFF');
    }, function() {
        // removing the glow from the circle??
    });
});

因此，当我将鼠标悬停在圆圈上时，起作用的部分是向圆圈添加发光效果.但是，当鼠标从圆形元素上移开时，我不知道如何去除辉光.您知道我如何从元素中移除光晕吗?

So the part that works is adding the glow to the circle when I hover over it. However, I don't know how to remove the glow when the mouse is moved away from the circle element. Do you know how I can remove the glow from an element?

注意:body元素的背景设置为黑色(#000).

Note: The background of the body element is set to black (#000).

使用的库:

• jQuery
• Raphael.js

推荐答案

解决方案可能比您想的要简单.

The solution is probably more simple than you were thinking.

http://jsfiddle.net/vszkW/2/(来自Matt的小提琴的叉子)

http://jsfiddle.net/vszkW/2/ (fork from Matt's fiddle)

您只需要存储发光"元素即可.和Raphael一样，元素具有.remove():

You just have to stock the "glow" which is an element. And as usual in Raphael, the elements have a .remove():

myCircle.hover(
    // When the mouse comes over the object //
    // Stock the created "glow" object in myCircle.g
    function() {
        this.g = this.glow({color: "#FFF", width: 100});
    },
    // When the mouse goes away //
    // this.g was already created. Destroy it!
    function() {
        this.g.remove();
    });

这篇关于如何为Raphael元素添加和删除辉光?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！