This article mainly introduces in detail the javascript implementation of the delay display prompt box effect, which has a certain reference value. Interested friends can refer to it
jsDelay prompt box effect demonstration:
Implementation method
Move into display, Move out of hiding
Remove delayed hiding, you can move from the first p to the second p, and still display it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#p1 {
width: 50px;
height: 50px;
background: red;
float: left
}
#p2 {
margin-left: 10px;
width: 250px;
height: 150px;
background: yellow;
float: left;
display: none
}
</style>
<script>
window.onload=function()
{
var op1=document.getElementById('p1');
var op2=document.getElementById('p2');
var timer=null;
op1.onmouseover=op2.onmouseover=function()
{
clearTimeout(timer);
op2.style.display='block';
};
op1.onmouseout=op2.onmouseout=function()
{
timer=setTimeout(function()
{
op2.style.display='none';}
,500);
};
};
</script>
<body>
<p id="p1"></p>
<p id="p2"></p>
</body>
</html>The above is the detailed content of Code example of how to implement delayed display prompt box effect in javascript. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
