当光标在Raphael中的另一个图像上时，如何防止鼠标悬停事件失去对图像的关注？

Question

当鼠标悬停在 big-girl-image 上时，small-edit-image（铅笔图）会出现在 big-girl-image 的上方。然后当鼠标悬停在铅笔图像上时，大女孩图像开始失去焦点，因此铅笔图像消失。我尝试使用onmouseleave=function()，但仍然无法解决这个问题。我尝试使用 css z-index 也无法修复此按钮。在http://jsfiddle.net/zac1987/6o2g0c60/4/ 进行演示。代码：

var searchDl = 1;
var l = 0;
var r = Raphael(5, 5, 1950, 1950);
var p = r.path("M 550, 20 C 720,60 920,480 550,700").attr({stroke: "none"}),
    pt = p.getPointAtLength(l);
    e = r.image("http://2aek.com/inventory/test/1.png", pt.x, pt.y, 120, 120),

    totLen = p.getTotalLength(),

    e.node.onmouseover = function(){
        y = r.image("http://2aek.com/inventory/test/edit-button.png", pt.x, pt.y, 30, 30);
        z = r.image("http://2aek.com/inventory/test/delete-button.png", pt.x + 90, pt.y, 30, 30);
    };

    e.node.onmouseleave=function(){
        y.remove();
        z.remove();
        alert ("big-girl-image losing focus already!");
    };

small-edit-image 位于 big-girl-image 之上。光标在小编辑图片上时，如何让鼠标光标一直聚焦在大女孩图片上？

Answer 1

在 mouseleave 处理程序中可以使用 javascript 和 setTimeout 来检查按钮是否在事件触发后一直悬停，但这真的很脏。
所以，我想知道您是否真的需要删除这些节点并每次都重新创建它们？

相反，您可以创建一次，应用一些 css 来隐藏它们（这里我使用 opacity : 0，但也可能是 visibility:hidden），利用 CSS :hover 选择器来更改不透明度，如果我们悬停主要的<image> 元素，最后应用一些内联样式：

var l = 0;
var r = Raphael(5, 5, 1950, 1950);
var p = r.path("M 550, 20 C 720,60 920,480 550,700").attr({stroke: "none"}),
    pt = p.getPointAtLength(l),
	e = r.image("http://2aek.com/inventory/test/1.png", pt.x, pt.y, 120, 120),
    // create our buttons here
	y = r.image("http://2aek.com/inventory/test/edit-button.png", pt.x, pt.y, 30, 30);
	z = r.image("http://2aek.com/inventory/test/delete-button.png", pt.x + 90, pt.y, 30, 30);
    // apply the css class
	y.node.setAttribute('class', 'buttons');
	z.node.setAttribute('class', 'buttons');

	e.node.onmouseover = function(){
        // set inline style, this will override the class one
		y.node.style.opacity = 1;
		z.node.style.opacity = 1; 
    	};
	
	e.node.onmouseleave=function(){
        // remove the inline style
		y.node.style.opacity = '';
        z.node.style.opacity = '';
	};
	
	e.node.onmousedown=function(){
		y.node.style.opacity = '';
		z.node.style.opacity = '';
	};

.buttons{ opacity:0;}
.buttons:hover{ opacity:1;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<img src="http://2aek.com/inventory/test/handsometemp.PNG" />