对于我的网站，我想使用显示一些内容mouseover，并且即使在采取操作时也希望显示内容几秒钟，mouseout因为内容包含一些有用的链接。为此，我使用setTimeoutjavascript 函数将函数延迟mouseout10 秒。但不幸的是它不起作用。<body> <img src="images/1.jpg" alt="some_text" id="test1" style="height: 450px; width: 300px;"> <img src="images/1.jpg" id="test2" alt="some_text" style="height: 450px; width: 300px;"> <script> document.getElementById("test1").addEventListener("mouseover", mouseOver); document.getElementById("test1").addEventListener("mouseout", mouseOut); function mouseOver() { document.getElementById("test2").style.opacity = "0"; document.getElementById("test2").style.visibility = "hidden"; } function mouseOut() { document.getElementById("test2").style.opacity = "1"; document.getElementById("test2").style.visibility = "visible"; } setTimeout(mouseOut, 10000); </script></body>
3 回答
大话西游666
TA贡献1817条经验 获得超14个赞
您应该调用setTimeout内部事件处理程序，如下所示：
document.getElementById("test1").addEventListener("mouseout", mouseOut);
function mouseOut() {
setTimeout(mouseOut2, 10000);
}
function mouseOut2() {
document.getElementById("test2").style.opacity = "1";
document.getElementById("test2").style.visibility = "visible";
}
蛊毒传说
TA贡献1895条经验 获得超3个赞
SetTimeout 应该在 mouseOut 里面
document.getElementById("test1").addEventListener("mouseover", mouseOver);
document.getElementById("test1").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("test2").style.opacity = "0";
document.getElementById("test2").style.visibility = "hidden";
}
function mouseOut() {
setTimeout(()=>{
document.getElementById("test2").style.opacity = "1";
document.getElementById("test2").style.visibility = "visible";
}, 6000);
}
<body>
<img src="images/1.jpg" alt="some_text" id="test1" style="height: 450px; width: 300px;">
<img src="images/1.jpg" id="test2" alt="some_text" style="height: 450px; width: 300px;">
</body>
一只萌萌小番薯
TA贡献1795条经验 获得超7个赞
由于您绑定mouseOut为相应事件的事件处理程序，它仍将被执行。您setTimeout添加的只会再调用mouseOut一次，与鼠标事件无关。
如果您想延迟处理鼠标移开事件时发生的事情，请执行以下操作：
function mouseOut() {
setTimeout(function () {
document.getElementById("test2").style.opacity = "1";
document.getElementById("test2").style.visibility = "visible";
}, 10000);
}
但是请注意，这可能不是那么用户友好。用户可能希望该行为与他们的鼠标移动有关，但现在连接丢失了——肯定有 10 秒的超时。
添加回答
举报
0/150
提交
取消