Button appears on hover - raphael

Question

I have a box. when you put your mouse over the box, a button appears on top of the box. the hover function works in such a way that it doesn't recognize that the mouse is still on top of the box. how can I solve it?
//I create the paper
var paper = Raphael(0, 0, 500,500);
//I add the box
var box = paper.add([{
type: "rect",
x: 100,
y: 100,
width: 100,
height: 100,
fill: '#000',
}])
// I declare a varible for the button
var button
//I add hover functions to the box.
//first function: when the mouse is on, create a red circle and add an
//onclick event to the circle
box.hover(function () {
button = paper.circle(150, 150, 25).attr({ 'fill': 'red' })
button.click(function () { alert("You clicked me!")})
},
//second function: when the mouse leaves the box, remove the circle
function () {
button.remove()
})
Here is an example
http://jsfiddle.net/V4E4Q/

Answer 1

You will have to deal with events from different objects one way or another, either I guess with a couple of handlers, or with one that has event propagation and handling possibly, or group with a set. The current event is coming from the button when its displayed, so the event logic doesn't quite make sense as it is. So you could add a handler to the button as well (edit, or use a set for example).
One example would be...
var button = paper.circle(150, 150, 25).attr({ 'fill': 'red' });
button.hide();
button.click( function() { alert("button clicked"); } );
box.mouseout( function() { button.hide() });
button.mouseover( function() { button.show(); });
box.mouseover(function () { button.show(); } );
I'm not sure if this is the most efficient way, but it should work. jsfiddle here http://jsfiddle.net/V4E4Q/1/
Edit: Another possibly cleaner way could be to group the elements into a set and handle the click. Here is a modified example http://jsfiddle.net/V4E4Q/3/