0

我正在尝试使用 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/

我完全不明白行为的区别，谁能给我一个提示？

4

1 回答 1

0

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

this.oGlow = bBox1 .glow({...

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

这个.oGlow =这个.glow({...

如何防止在元素的内部元素上失去悬停是关于 SO 的最常见的 Raphael 相关问题之一。有关小型项目的简单解决方案，请参见this ，对于较大项目的替代方案，请参见此开放线程。

于 2013-01-23T16:40:21.507 回答