给你个鼠标移动到图片的事件例子：
<!DOCTYPE html>
<html>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38width:200pxheight:50pxpadding-top:25pxtext-align:center">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="鼠标移到DIV"
}
function mOut(obj)
{
obj.innerHTML="鼠标离开DIV"
}
</script>
</body>
</html>
上面只是设置了移到改变文本 ，你可以利用本事件设置鼠标移到和离开时目标div的CSS实现效果！或者追问详细说明要什么样的效果，我帮你做！
经测试，采用Firefox 45.0.1存在闪烁问题，并发现以下浏览器的某个版本：微信内置浏览器、QQ浏览器、Safari手机浏览器及早期的Chrome可能存在类似情况，包括载入闪动，悬停后闪动。分析：
Blink对transition中，属性transform的动画渲染存在差异，而Chrome中的最新版本，已经不存在此情况。
解决方法：
<style>
.outter {
height: 375px
margin: 10px auto
width: 500px
}
.inner{
}
img:hover {
width:110%
margin-left:-5%
margin-top:-5%
}
img{
width:100%
transition:0.4s ease-in-out
}
</style>
复制代码
以上CSS，在IE10、IE11、Chrome及Firefox 45.0.1中调试通过：
首次载入，及Ctrl+F5刷新，均不会有闪动情况
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）