3

我对大多数网络开发的东西都很陌生，所以我恳请您提供一些支持。我有一个图像映射，我在其中分配了几个区域，在单独的 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);
    }
  }
}

那么我如何实施延迟以及在哪里？提前谢谢！一月

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

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

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

4

2 回答 2

3

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

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

对于更复杂的场景，请使用类似hoverintent的插件。

于 2012-12-02T19:37:49.173 回答
0

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

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

于 2012-12-02T19:33:49.220 回答