<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
transition: all 2s;
}
</style>
</head>
<body><div class="div1"></div>
</body>
<script type="text/javascript">
var div1=document.querySelector('.div1')
div1.onmouseenter=function(e){
div1.style.background="#333333"
div1.style.color="royalblue"
div1.innerHTML='<span>这是个小猪</span>'
}
div1.onmouseleave=function(e){
div1.style.background="#87CEEB"
div1.style.color="royalblue"
div1.innerHTML='<span>这是个小猪</span>'
}
</script>
</html>
