<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bo{
width:100%;
background-color: #7fffd4;
transition:top 1.5s;
}
</style>
</head>
<body>
<div class="box">
<div class="box1" style="position:relative;width:500px;height:300px;border:1px solid red;overflow: hidden;">
<img src="./image/4.jpg" alt="" style="width:500px;height:300px;">
<div style="position:absolute;top:240px;background-color: bisque;" class="bo">
<h3>你好明天</h3>
<p>你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天</p>
</div>
</div>
</div>
<script>
var item=document.getElementsByClassName('box1')[0]
var bo=document.getElementsByClassName('bo')[0]
item.onmouseover = function(ev)
{
var ev=ev||window.event;
if(!isMouseLeaveOrEnter(ev,this)){return false;}
bo.style.top=0+'px'
};
item.onmouseout = function(ev)
{
var ev=ev||window.event;
if(!isMouseLeaveOrEnter(ev,this)){return false;}
bo.style.top=240+'px'
};
//消除onmouseover和onmouseout重复执行，这是关键代码
function isMouseLeaveOrEnter(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
}
</script>
</body>
</html>
