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

Question

当鼠标悬停在大女孩图像上时，小编辑图像（铅笔图像）将出现在大女孩图像之上。然后当鼠标悬停在铅笔图像上时，大女孩图像开始失去焦点，因此铅笔图像消失了。我尝试使用 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!");
    };

小编辑图片在大女孩图片之上。如何让鼠标光标在小图上时仍然聚焦在大女孩图上？

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" />

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

How to prevent mouseover event lose focus on an image when cursor is on another image in Raphael?

javascript

jquery

svg

raphael