为什么鼠标悬停它还是会执行鼠标移开操作？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
padding-top: 100px;
background: #f00;
background: linear-gradient(#ff0,#f00) no-repeat center scroll;
transform: rotate(0) translate(0,0) scale(1, 1);
transition: all 2s ease-in-out .5s;
}
.container:hover{
border-radius: 50px;
background: radial-gradient(#f0f,#abcdef,#0f0) no-repeat center scroll;
transform: rotate(45deg) translate(300px,300px) scale(3,1);
transition: all 2s ease-in-out .5s;
}
</style>
</head>
<body>
<div class="container">
为什么鼠标悬停它还是会执行鼠标移开操作？
</div>
</body>
</html> 为什么鼠标悬停它还是会执行鼠标移开操作？，不是应该等我鼠标移开了才会执行移开操作吗？请教老师！10
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕慕子
2019-04-26 10:08:00
同学你好， 请问同学这里说的情况是： 鼠标移入的时候，本来应该是紫色的背景渐变色变成了橙色是吗？
如果是指这里的话， 那么是因为鼠标悬停的有效区域为container盒子的大小100px, 所以可能在鼠标悬停的时候，移动了鼠标的位置，鼠标就离开的container的有效区域， 导致执行了鼠标移开的操作。
建议： 可以给container添加一个父级div，让鼠标悬浮在父级div上，改变container的样式。 增大鼠标悬停的有效区域， 参考下图：
若同学不是指的这里的话，可以详细的描述下，指的是哪里，再次提问，老师会继续为你解答哦
如果帮助到了你， 欢迎采纳
祝学习愉快~~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星