如何防止鼠标悬停事件失去焦点的图像，当光标在另一个图像在拉斐尔

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

本文关键字：图像 何防止 光标 另一个 事件 悬停 失去 焦点 鼠标      更新时间：2023-09-26

当鼠标悬停在big-girl-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之上。如何使鼠标光标保持专注于大女孩的形象，当光标是在小编辑形象?

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

相关文章：