Question

我是大多数网络开发人员的新手，所以我很友好地请求你一些支持。我有一个图像映射，其中我已经分配了几个区域，在一个单独的div中触发不同的内容。我现在想在onmouseover触发器上添加一个延迟，这样只有当用户将光标放在区域上而不是意外地将光标悬停在区域上时，才会更新div中的内容。

这是用于切换div内容的js：

function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}

function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
    oShowHideDivs[i].style.display = 'none';
}
}

window.onload=function(){
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
    oMap.areas[i].indx = i;
    oMap.areas[i].onmouseover=function(){
        showHideDivs(this.indx);
    }
  }
}

那么我该如何实现延迟呢？提前thx！扬

编辑：我现在用这种方法：

oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}

对我来说似乎最容易。这是提示！

Answer 1

最简单的方法是在鼠标悬停时包含超时，并在mouseout上清除它。

oMap.areas[i].onmouseover=function(){
    var area=this;
    var delay=setTimeout(function(){showHideDivs(area.indx);},100);
    area.onmouseout=function(){clearTimeout(delay);};
}

对于更复杂的方案，请使用hoverintent等插件。

Answer 2

您需要使用setTimeout（）在一定延迟后调用您的函数showHideDivs()。如果用户在延迟结束前移动鼠标，则会停止调用此函数。

在这里查看具体示例：https://stackoverflow.com/a/6231142/1606729

延迟onmouseover javascript

2 个答案: