Javascript 具有重叠div的鼠标事件

我需要在另一个图像上显示图像，而不是使用这些代码，但是当我的鼠标位于显示图像的列表lisdel上时，它会消失，因为它接收到mouseout事件。这很难解释，但是试着调试一下，然后在你将看到的图像中移动鼠标

<script>
    var mouseOverListDel = false;
    // Detect if the browser is IE or not.
    // If it is not IE, we assume that the browser is NS.
    var IE = document.all ? true : false

    // If NS -- that is, !IE -- then set up for mouse capture
    if (!IE) document.captureEvents(Event.MOUSEMOVE)

    // Set-up to use getMouseXY function onMouseMove
    document.onmousemove = getMouseXY;

    // Temporary variables to hold mouse x-y pos.s
    var tempX = 0
    var tempY = 0

    // Main function to retrieve mouse x-y pos.s

    function getMouseXY(e) {
        if (IE) { // grab the x-y pos.s if browser is IE
            tempX = event.clientX + document.body.scrollLeft
            tempY = event.clientY + document.body.scrollTop
        } else {  // grab the x-y pos.s if browser is NS
            tempX = e.pageX
            tempY = e.pageY
        }
        // catch possible negative values in NS4
        if (tempX < 0) { tempX = 0 }
        if (tempY < 0) { tempY = 0 }
        // show the position values in the form named Show
        // in the text fields named MouseX and MouseY
        var txbX = document.getElementById('TextBox1');
        var txbY = document.getElementById('TextBox2');
        txbX.value = tempX;
        return true
    }


    function getPosition(element) {
        var xPosition = 0;
        var yPosition = 0;

        while (element) {
            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
            element = element.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }



    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = document.createElement('span');

                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                      '" title="', escape(theFile.name), '"/>'].join('');
                    span.style.height = "65px";
                    span.style.width = "90px";
                    document.getElementById('list').insertBefore(span, null);

                    var del = document.createElement('del');
                    del.style.visibility = "hidden";
                    del.innerHTML = ['<img class="thumbdel" src="http://s7.postimage.org/fc6w3qjp3/del.png',
                                      '" title="', escape(theFile.name + "del"), '"/>'].join('');
                    document.getElementById('listdel').insertBefore(del, null);
                    del.addEventListener("click", function () { delClick(del, span) }, false);

                    del.addEventListener('mouseover', function () { opacityOn(del) }, false)
                    del.addEventListener('mouseout', function () { opacityOn(del) }, false);
                    span.addEventListener('mouseover', function () { opacityOn(del) }, false);
                    span.addEventListener('mouseout', function () { opacityOff(del) }, false);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    function delClick(imgDel, img)
    {
        var listImg = document.getElementById('list');
        listImg.removeChild(img);

        var listDelImg = document.getElementById('listdel');
        listDelImg.removeChild(imgDel);
    }

    function opacityOn(imgDel)
    {
        imgDel.style.visibility = "visible";
    }

    function opacityOff(imgDel)
    {
            imgDel.style.visibility = "hidden";
    }


    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

var mouseOverListDel=false；
//检测浏览器是否为IE。
//如果不是IE，我们假设浏览器是NS。
var IE=document.all？对：错
//如果NS，那就是！IE——然后设置鼠标捕捉
if（！IE）document.captureEvents（Event.MOUSEMOVE）
//设置为在MouseMove上使用getMouseXY函数
document.onmousemove=getMouseXY；
//用于固定鼠标x-y位置的临时变量
var tempX=0
var tempY=0
//检索鼠标x-y位置的主要功能
函数getMouseXY（e）{
如果（IE）{//如果浏览器是IE，则抓取x-y位置
tempX=event.clientX+document.body.scrollLeft
tempY=event.clientY+document.body.scrollTop
}否则{//如果浏览器为NS，则抓取x-y位置
tempX=e.pageX
tempY=e.pageY
}
//捕捉NS4中可能的负值
如果（tempX<0）{tempX=0}
如果（tempY<0）{tempY=0}
//以名为show的形式显示位置值
//在名为MouseX和MouseY的文本字段中
var txbX=document.getElementById（'TextBox1'）；
var txbY=document.getElementById（'TextBox2'）；
txbX.value=tempX；
返回真值
}
函数getPosition（元素）{
var xPosition=0；
var-yPosition=0；
while（元素）{
xPosition+=（element.offsetLeft-element.scrollLeft+element.clientLeft）；
yPosition+=（element.offsetTop-element.scrollTop+element.clientTop）；
element=element.offsetParent；
}
返回{x:xPosition，y:yPosition}；
}
功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
//仅处理图像文件。
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
span.style.height=“65px”；
span.style.width=“90px”；
document.getElementById（'list'）.insertBefore（span，null）；
var del=document.createElement（'del'）；
del.style.visibility=“隐藏”；
del.innerHTML=[''）.join（''）；
document.getElementById（'listdel'）.insertBefore（del，null）；
addEventListener（“click”，函数（）{delClick（del，span）}，false）；
addEventListener（'mouseover'，函数（）{opacityOn（del）}，false）
addEventListener（'mouseout'，function（）{opacityOn（del）}，false）；
addEventListener（'mouseover'，function（）{opacityOn（del）}，false）；
addEventListener（'mouseout'，函数（）{opacityOff（del）}，false）；
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}
}
函数delClick（imgDel、img）
{
var listImg=document.getElementById（'list'）；
列表img.removeChild（img）；
var listDelImg=document.getElementById（'listdel'）；
去除细菌（imgDel）；
}
功能不透明（imgDel）
{
imgDel.style.visibility=“可见”；
}
功能不透明度（imgDel）
{
imgDel.style.visibility=“隐藏”；
}
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，false）；

你能用CSS来做这个吗？比如：

.listDel {
    background: none;
}

.listDel :hover {
    background: URL("URL to image");
}

当然，如果您想要在javascript中显示图像的复杂条件，为什么不考虑这样做：

var listdel = document.getElementById('listdel');
listdel.addEventListener('mouseover', 
    function () { window.mouseOverListDel = true; }
    , false);
listdel.addEventListener('mouseout', 
    function () { 
         setTimeout( 
             function () {  window.mouseOverListDel = false; }
             , 333
         );
    }
    , false);

然后在

opacityOn

函数中（可能还隐藏了删除按钮图像？）检查是否设置了该标志（

mouseOverListDel

），如果设置了，则您不想隐藏删除按钮图像，因为您知道鼠标位于删除图像列表上方，并且不应该隐藏任何内容

即使我还没有完全理解你的细节，这种模式也会有所帮助。基本上，您希望继续显示图像，即使鼠标在本地离开该图像的边界，但它仍然位于与该图像“用户相关”的位置——即，它仍然“看起来非常接近该图像”，因此如果继续显示该图像是有帮助的，如果不显示则没有帮助

您可以使用像

hoverIntent

这样的库，并使用jQuery来简化这一过程，或者您也可以自己编写它，正如我给您的示例所示。基本思想分为两部分：

当鼠标悬停在感兴趣的区域上时，为其设置标志，当鼠标悬停在区域上时，取消设置标志

从其他鼠标悬停事件处理程序中检查这些标志，以确定是否满足为操作选择的条件（图像显示、图像隐藏或任何其他）

这里是关键点由于事件触发时间略有变化，您需要稍微延迟检查标志，延迟时间为一小段秒（您可以测试这些毫秒值）。因此，您需要将

mouseout

中的处理程序代码延迟333ms，因为例如，

listd