鼠标移入和移出事件
2019-05-07 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 鼠标移入和移出事件 </title>
onmouseover：
鼠标移入事件
onmouseout:
鼠标移出事件
<style>
#tu {
width: 120px;
height: 200px;
background: url('../images/0111.jpg')no-repeat;
position: fixed;
right: 0;
top: 50%;
margin-top: -100px;
}
#tu1 {
position: absolute;
width: 300px;
left: -300px;
display: none;
}
</style>
</head>
<body>
<div id="tu">
<img src="../images/01.jpg" alt="" id="tu1">
</div>
<script>
// 找到小图
var tu = document.getElementById('tu');
// 找到大图
var tu1 = document.getElementById('tu1');
// 添加鼠标移入事件
tu.onmouseover = function() {
tu1.style.display = "block";
}
// 添加鼠标移出事件
tu.onmouseout = function() {
tu1.style.display = "none";
}
</script>
</body>
</html>
