IE 9重置背景位置悬停时（IE漏洞？） [英] IE 9 resets background-position when hover (IE bug?)

问题描述

我不能bealieve我发现的东西，无论是在IE8和IE7的作品，但在IE9失败。这里是网页我工作：[链接到该网站] [1]。请注意，在IE9中，侧菜单上悬停的链接时，浏览器的背景重置为背景位置：0 0 也只有这个applys后，该脚本是动画，以背景位置：-20px 0 （其中我希望它在第一时间去）。是什么，我做了不少错事，或有一个IE浏览器的bug？还需要一些帮助来解决它。

I can't bealieve i found something that works both in IE8 and IE7 but fails in IE9. Here is the page i was working on: [Link to the site][1]. Notice how in IE9, on the side menu when hover a link the browser resets the background to background-position: 0 0 and only after this applys, the script animates it to background-position: -20px 0 (where i want it to go in the first place). Is anything that i've done wrong or there is a IE bug? Also need some help to fix it.

下面是我applaying到IE脚本brawsers只有：

here is the script that i am applaying to IE brawsers only:

**

  $('#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-唯一的解决办法？

Might I suggest the following CSS-only solution?

#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 本身，而不是它的组件属性。

If you really want it to work in IE9 and below (since it does work fine in IE10), try animating backgroundPosition itself, rather than its component properties.

$("#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});}
 );

这篇关于IE 9重置背景位置悬停时（IE漏洞？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！