Button appears on hover <p>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?</p> <pre><code>//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() }) </code></pre> <p>Here is an example</p> <p><a href="http://jsfiddle.net/V4E4Q/" rel="nofollow">http://jsfiddle.net/V4E4Q/</a></p>