3

我不敢相信我发现了一些在 IE8 和 IE7 中都有效但在 IE9 中失败的东西。这是我正在处理的页面：[链接到该站点][1]。请注意，在 IE9 中，当悬停链接时，浏览器会在侧边菜单上将背景重置为，background-position: 0 0并且只有在此应用后，脚本才会将其设置为动画background-position: -20px 0（我希望它首先出现的位置）。是我做错了什么还是存在 IE 错误？还需要一些帮助来修复它。

这是我仅适用于 IE brawsers 的脚本：

**

  $('#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]：

4

1 回答 1

2

我可以建议以下纯 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});}
 );
于 2012-12-21T18:15:26.757 回答