<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 600px;
height: 400px;
background: cornsilk;
margin: 0 auto;
transition: all .5s;
}
.circle{
width: 5px;
height:5px;
border-radius: 2.5px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div class="div1">
</div>
<script type="text/javascript">
var div1 = document.querySelector('.div1')
//鼠标进入事件
div1.onmouseenter = function(e){
div1.style.background = 'deepskyblue'
div1.style.color = '#fff'
div1.innerHTML = '<h1>这是鼠标进入事件</h1>'
}
//鼠标离开事件
div1.onmouseleave = function(){
div1.style.background = 'sandybrown'
div1.style.color = '#fff'
div1.innerHTML = '<h1>这是鼠标移出事件</h1>'
}
//鼠标移动事件//
// div1.onmousemove = function(e){
// console.log(e)
// console.log(e.clientX,e.clientY)
// var newDiv = document.createElement('div')
// newDiv.className = 'circle'
// newDiv.style.left = e.clientX + 'px';
// newDiv.style.top = e.clientY + 'px';
// document.body.appendChild(newDiv)
// }
//鼠标按下事件
div1.onmousedown = function(){
div1.style.background = 'silver'
div1.style.color = '#fff'
div1.innerHTML = '<h1>这是鼠标按下事件</h1>'
}
//鼠标抬起事件
div1.onmouseup = function(){
div1.style.background = 'burlywood'
div1.style.color = '#fff'
div1.innerHTML = '<h1>这是鼠标抬起事件</h1>'
}
//鼠标滚轮事件
div1.onmousewheel = function(e){
console.log(e)
div1.innerHTML = '<h1>这是鼠标滚轮事件</h1>'
}
</script>
</body>
</html>
