我不敢相信我发现了一些在 IE8 和 IE7 中都有效但在 IE9 中失败的东西。这是我正在处理的页面:[网站链接][1]。请注意,在 IE9 中,当悬停链接时,浏览器在侧面菜单上如何将背景重置为background-position: 0 0
并且只有在应用之后,脚本才会将其动画化background-position: -20px 0
(我首先希望它去的地方)。是我做错了什么还是IE有bug?还需要一些帮助来修复它。
这是我仅应用于 IE 浏览器的脚本:
**
$('#nav_bar li')
.css( {backgroundPositionX:"-224px",
backgroundPositionY:"0px"} )
.mouseenter(function(){
$(this).stop().animate(
{backgroundPositionX:"-20px"},
{duration:550})
})
.mouseleave(function(){
$(this).stop().animate(
{backgroundPositionX:"-224px",
backgroundPositionY:"0px"},
{duration:550})
})
谢谢您的帮助!
[1]:
我可以建议以下纯 CSS 解决方案吗?
#nav_bar li {
/* whatever you need for the background image */
background-position: -224px 0;
transition: background-position 0.55s ease;
-webkit-transition: background-position 0.55s ease;
}
#nav_bar li:hover {
background-position: -20px 0;
}
如果你真的希望它在 IE9 及更低版本中工作(因为它在 IE10 中工作得很好),请尝试动画backgroundPosition
本身,而不是其组件属性。
$("#nav_bar li")
.css({backgroundPosition:"-224px 0"})
.hover(
function() {$(this).stop().animate({backgroundPosition:"-20px 0"},{duration:550});},
function() {$(this).stop().animate({backgroundPosition:"-224px 0"},{duration:550});}
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)