[英]:hover css box-shadow display error on jQuery animate
So I am animating a div using jQuery. 因此,我正在使用jQuery为div设置动画。 Like so: 像这样:
$('#Reporting').animate({ width: 250, fontSize: 21 }, 750)
Then I have a box shadow on this with css 然后我用css在上面有一个盒子阴影
box-shadow: 0em 0em 0.5em 0.05em $Black;
However as soon as the animate kicks in the box-shadow
is removed has anyone any idea as to why this happens? 但是,一旦移除了动画, box-shadow
就消失了,有谁知道为什么会这样? this is also removed from the :hover
alternate box-shadow
as well. 也可以从:hover
备用box-shadow
删除它。
Thanks Tim 谢谢蒂姆
The reason is because .animate()
in jQuery is adding overflow:hidden
to your css and so the box-shadow even though is being applied is then hidden by the inline css that jQuery has added. 原因是因为jQuery中的.animate()
向您的CSS中添加了overflow:hidden
,因此即使已应用了盒形阴影,jQuery所添加的内联CSS也隐藏了该阴影。
Try adding this to your jQuery 尝试将其添加到您的jQuery
$('#Reporting').css({ 'overflow': 'visible' });
This will stop jQuery auto adding the 'hidden' to your css and set it to visible, this should also fix the :hover
as well. 这将停止jQuery自动将“隐藏”添加到您的CSS并将其设置为可见,这也应该修复:hover
。
This should fix your box-shadow issue, quite a common issue with .animate()
这应该可以解决您的box-shadow问题,这是.animate()
的常见问题
Thanks Alan 谢谢艾伦
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.