Question

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

<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不会停止，工具提示仍然会消失。

以下是我site的链接以说明示例（相关图片是顶部轮播的图片）

Answer 1

如果我正确理解了你的问题，你必须在再次将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，以及第二次将鼠标悬停在图像上时现在当调用clearTimeout（timeVar）时，它会清除计时器2，但是1仍然在运行并且不会被清除，因为timeVar不再包含它的id。

Answer 2

您没有为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);
}

也会在imgout的鼠标输出时调用div#tooltip6。

<div id="tooltip6" onmouseover="imgover_tooltip6()" onmouseout="imgout()" >Tooltip Text</div>

setTimeout无故启动，无法停止

2 个答案: