Question

我正在尝试使用Raphael JavaScript库创建一个包含文本的按钮。我想在鼠标悬停按钮周围发光。我通过使用矩形和文本上的设置并在集合上应用发光来实现此目的。我尝试了两种方法将mouseover和mouseout方法绑定到生成的按钮集。在第一种情况下，如果光标到达文本，则发光停留，在第二种情况下，发光消失。这是代码：

    // canvas
var paper = Raphael(0, 0, "100%", "100%");

// background of the first button
var bBox1 = paper.rect(100, 100, 120, 50, 10).attr({
    fill: 'darkorange',
    stroke: '#3b4449',
    'stroke-width': 2
});
// text of the first button
var text1 = paper.text(bBox1.attrs.x + bBox1.attrs.width / 2, bBox1.attrs.y + bBox1.attrs.height / 2, 'Click to expand').attr({
    "font-family": "Helvetica",
    "font-size": 16
});

// set of rectangle + text = button
var button1 = paper.set().attr({
    cursor: 'pointer'
});
button1.push(bBox1);
button1.push(text1);

button1.mouseover(function (event) {
    this.oGlow = bBox1.glow({
        opacity: 0.85,
        color: 'gray',
        width: 15
    });
}).mouseout(function (event) {
    this.oGlow.remove();
});

// ********** now the second button **********
// background of the second button
var bBox2 = paper.rect(100, 200, 120, 50, 10).attr({
    fill: 'lightblue',
    stroke: '#3b4449',
    'stroke-width': 2
});
// text of the first button
var text2 = paper.text(bBox2.attrs.x + bBox2.attrs.width / 2, bBox2.attrs.y + bBox2.attrs.height / 2, 'Click to expand').attr({
    "font-family": "Helvetica",
    "font-size": 16
});

// set of rectangle + text = button
var button2 = paper.set().attr({
    cursor: 'pointer'
});
button2.push(bBox2);
button2.push(text2);

// function for the mousover event for buttons
var buttonMouseoverHandler = function (event) {
    this.oGlow = this.glow({
        opacity: 0.85,
        color: 'gray',
        width: 15
    });
}

// function for the mouseout event
var buttonMouseoutHandler = function (event) {
    this.oGlow.remove();
}

button2.mouseover(buttonMouseoverHandler);
button2.mouseout(buttonMouseoutHandler);

这是一个有效的jsfiddle示例：http://jsfiddle.net/fkNhT/

我绝对不明白行为上的差异，有人可以给我一个提示吗？

Answer 1

简单：在第一次鼠标悬停时，您将在rect对象上设置发光，而不管被鼠标悬停的是什么：

this.oGlow = bBox1 .glow（{...

在第二个中，您将其设置为“this”，当您将鼠标悬停在文本对象上时，该文本对象会应用该文本对象：

this.oGlow = this .glow（{...

如何防止丢失悬停在元素的内部元素上是与拉斐尔相关的最常见问题之一。有关小项目的简单解决方案，请参阅this;有关更大项目的替代方案，请参见this open thread。

RaphaelJS HTML5库：创建一个带有文本的按钮，并在鼠标悬停时发光

1 个答案: