IE 9在悬停时重置背景位置(IE bug?)

Question

我简直不敢相信我发现了一些在IE8和IE7都能工作的东西，但在IE9却不能。这是我正在做的页面:[链接到网站][1]。注意在IE9中，在侧边菜单上，当鼠标悬停一个链接时，浏览器将背景重置为background-position: 0 0，只有在此应用之后，脚本才将其动画为background-position: -20px 0(我想要它首先去的地方)。是什么，我做错了或有IE错误?还需要一些帮助来修复它。

这里是脚本，我只适用于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]:

Answer 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下工作(因为它在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});}
 );