0

当我将鼠标移到图像上时，我会激活一个工具提示：

<img src="images/F9903.jpg" alt="fruit1" width="200" height="200" onmouseover="imgover(this, document.getElementById('text1').innerHTML)" onmouseout="imgout()" /> 
............
 <div id="tooltip6" onmouseover="imgover_tooltip6()" >Tooltip Text</div>

我移开光标后它会消失。以下是与之相关的javascript代码：

    function imgover(img, tip) {


        document.getElementById('tooltip6').innerHTML = tip;
        var DivHeight = document.getElementById('tooltip6').scrollHeight;
        //alert(DivHeight);

        //document.getElementById('tooltip6').style.display = 'block';
        document.getElementById('tooltip6').style.height = DivHeight + 'px';
        document.getElementById('tooltip6').style.opacity = '1';
        document.getElementById('tooltip6').style.overflow = 'visible';



    }
    var timeVar;

    function imgout() {

       timeVar =  setTimeout(function () {
            document.getElementById('tooltip6').style.height = '0px';
            document.getElementById('tooltip6').style.opacity = '0';
            document.getElementById('tooltip6').style.overflow = 'hidden';

        }, 3000);
    }   

    function imgover_tooltip6() {
        clearTimeout(timeVar);
    }

这里有很多问题：

即使我在函数 imgover_tooltip6() 中添加了注释，setTimeout 也只能在第一次正常工作，然后当我再次将光标移到图像上时，即使光标仍在，工具提示也会消失（有时会立即消失）图片。

当我将光标移到工具提示上（在它消失之前）时，setTimeOut 不会停止，工具提示仍然会消失。

这是一个指向我的网站的链接来说明这个例子（有关的图像是顶部的轮播图）

4

2 回答 2

3

如果我正确理解了您的问题，则必须在将 setTimeout 再次设置为同一变量之前调用 clearTimeout(timeVar) 。

function imgover(img, tip) {
   clearTimeout(timeVar);
   .....
}
function imgout() {
   clearTimeout(timeVar);

   timeVar =  setTimeout(function () {
        document.getElementById('tooltip6').style.height = '0px';
        document.getElementById('tooltip6').style.opacity = '0';
        document.getElementById('tooltip6').style.overflow = 'hidden';

    }, 3000);
}

多次悬停在图像上后工具提示隐藏的原因是，当您第一次悬停在图像上时，timeVar 获取第一个计时器的 id，1，而当第二次悬停时，它得到2. 现在当 clearTimeout(timeVar) 被调用时，它会清除定时器 2，但 1 仍然在运行并且不会被清除，因为 timeVar 不再包含它的 id。

于 2013-07-12T05:38:44.733 回答
1

你不是在clearTimeout呼吁timeVar。你应该imgover_tooltip6在imgout设置超时之前打电话。

function imgout() {
   imgover_tooltip6();
   timeVar =  setTimeout(function () {
        document.getElementById('tooltip6').style.height = '0px';
        document.getElementById('tooltip6').style.opacity = '0';
        document.getElementById('tooltip6').style.overflow = 'hidden';

    }, 3000);
}

也调用imgoutmouseout 的div#tooltip6。

<div id="tooltip6" onmouseover="imgover_tooltip6()" onmouseout="imgout()" >Tooltip Text</div>
于 2013-07-12T06:05:58.027 回答