setTimeout不能与onmouseout一起工作
setTimeout not working with onmouseout
首先是有问题的代码行:
<a onmouseover="hoverDisplay(this)" onmouseout="setTimeout(unHoverDisplay(), 3000);" href="http://rabbit.jpg">
Rabbit
</a><br>
基本上,我希望图像加载并出现当我悬停在链接上,我希望它消失一段时间后当我悬停在链接。方法:
hoverDisplay(this)
unHoverDisplay()
分别显示和删除图像,但当我试图延迟unHoverDisplay()时,它不起作用;鼠标一离开链接,图像就消失了。
我试过在setTimeout后添加和删除分号(不确定分号是否必要),我也试过延迟hoverDisplay函数,这不起作用。除了延迟问题,这两个函数都能正常工作。
这似乎是一个简单的问题,但我不知道我做错了什么。帮助是值得感激的。谢谢。不确定这是否必要,但以下是这两个函数的实现:
//Display image for link that you hover over
var address; //Address of image
var toBeDisplayed; //Declaring img object
var maxHeight=screen.height;
var maxWidth=screen.width;
var invisible=document.getElementById("invisible"); //the div in which the image is contained
function hoverDisplay(imageLink)
{
address=imageLink.getAttribute("href"); //get address
toBeDisplayed=document.createElement("img"); //create img
toBeDisplayed.setAttribute("src", address); //give img the address
//Resize img if it doesnt fit on the screen
if(toBeDisplayed.height > maxHeight)
{
toBeDisplayed.style.height="" + maxHeight + "px";
}
else if(toBeDisplayed.width > maxWidth)
{
toBeDisplayed.style.width="" + maxWidth + "px";
}
invisible.appendChild(toBeDisplayed); //display image by adding it as a child to a div
invisible.style.visibility="visible"; //make div visible
toBeDisplayed.style.border="solid yellow 5px";
}
//Remove image once you hover out of the link
function unHoverDisplay()
{
//Removes all children of the div
while(invisible.firstChild)
{
invisible.removeChild(invisible.firstChild); //remove img by removing it as a child
}
invisible.style.visibility="hidden";
}
麻烦的是,unHoverDisplay后的括号在你的第一个参数setTimeout
导致unHoverDisplay立即执行。您只需通过不带括号的标识符传递函数:
onmouseout="setTimeout(unHoverDisplay, 3000);"
将函数作为参数传递给setTimeout,而不是调用它。因此,不需要在函数名后面加上括号,所需要的只是函数名本身。
onmouseout = "setTimeout(unHoverDisplay, 3000);"
相关文章:
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- document.title函数可以't设置它与php一起工作
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 非常简单的js测试;Don’不要和Minko一起工作
- 无法使我的文本参数与我的查询一起工作
- 为什么Angularjs验证don't与输入[type=“number”]一起工作
- 无法使vash 0.8.0与express 4.12.3一起工作
- 如何使Angular JS控制器与指令一起工作
- 无法使autocompletion与bootstrap和php代码点火器一起工作
- 注入的元素和jQuery脚本.如何让他们一起工作
- 两个独立工作的javascript函数,但不能一起工作
- 角度和砖石一起工作
- Node http-proxy-middleware 不能与本地服务器一起工作
- jQuery脚本不想一起工作
- page.js使examples/hash与hashbang:true一起工作
- javascript使jquery倒计时与UTC时间一起工作
- jQuery.not()选择器无法与类一起工作
- Rails3-可排序列表不能与wysihtml5一起工作
- 替换匹配函数给出了未定义的错误,但它与替换一起工作
- 按钮上的数据加载消息无法与ajax调用一起工作