<style>
div {
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var timer =null
var opa =1
document.querySelector('div').onmouseenter=function(){
var that=this
timer=setInterval(function(){
opa-=0.1
if(opa<0){
opa=1
}else{
that.style.opacity=opa
}
},1000)
}
document.querySelector('div').onmouseleave = function() {
opa = 1
this.style.opacity = opa
clearInterval(timer)
}