RaphaelJS HTML5 Library : creating a button with text and glow on mouseover

Question

I am trying to create a button with text inside using the Raphael JavaScript library. I would like to have a glow around the button on mouseover. I achieved this by using the set on rectangle and text and applying the glow on the set. I tried two approaches binding the mouseover and mouseout methods to the resulting button set. In the first case the glow stays if the cursor reaches the text, in the second one the glow disappears. Here is the code :

    // 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);

Here is a working jsfiddle example : http://jsfiddle.net/fkNhT/

I absolutely do not understand the difference in the behavior, can anyone please give me a hint?

Answer 1

Simple: In the first mouseover, you're setting the glow on the rect object, regardless of what's being moused over:

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

In the second, you're setting it to "this", which would apply to the text object when you mouse over it:

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

How to prevent the loss of hover on interior elements of an element is one of the most common Raphael-related questions on SO. See this for a simple solution for small projects, and this open thread for an alternative for bigger projects.