raphael - ホバー時にボタンが表示される

Question

私は箱を持っています。ボックスの上にマウスを置くと、ボックスの上にボタンが表示されます。ホバー機能は、マウスがまだボックスの上にあることを認識しないように機能します。どうすれば解決できますか？

//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()
})

ここに例があります

http://jsfiddle.net/V4E4Q/