Jquery 背景立场问题

我有一个ul和一堆li，它们都有不同的背景图像。 将鼠标悬停在每个li上时，将获得预期的滚动背景位置更改。 我还应用了一个启动jquery函数的按钮 将该背景位置更改同时应用于每个li。 这也和预期的一样有效

不起作用的是，一旦悬停调用jquery的按钮， 您无法再单独成功悬停lis

以下是正在工作（或不工作）的示例。。。 先滚动圆圈，然后尝试按钮，然后再次尝试圆环，它们不再工作？？？请帮忙

以下是我的jQuery：

$(document).ready(function(){
    $('.powerRoll').hover(function(){
        $('li').css({backgroundPosition: '0 -130px'});
    })
    .mouseout(function(){
        $('li').css({backgroundPosition: '0px 0px'});
    })
});

---

问题是JavaScript正在设置内联CSS，而内联CSS是在样式表中声明的CSS之上使用的

您可以添加

！对于每个列表项元素的背景位置的类声明，重要信息

li:hover {
    background-position : 0 -130px !important;
}

或者您可以更改JS，这样就不会覆盖

mouseout

上的CSS规则：

$('.powerRoll').mouseover(function(){
    $('li').css({backgroundPosition: '0 -130px'});
})
.mouseout(function(){
    $('li').css({backgroundPosition: ''});
})

我在你的网站上测试了这两种方法，它们看起来都能正常工作

另一种选择是创建一个类来添加和删除元素，而不是更改元素的内联CSS：

CSS--

JS--

---

问题是JavaScript正在设置内联CSS，而内联CSS是在样式表中声明的CSS之上使用的

您可以添加

！对于每个列表项元素的背景位置的类声明，重要信息

li:hover {
    background-position : 0 -130px !important;
}

或者您可以更改JS，这样就不会覆盖

mouseout

上的CSS规则：

$('.powerRoll').mouseover(function(){
    $('li').css({backgroundPosition: '0 -130px'});
})
.mouseout(function(){
    $('li').css({backgroundPosition: ''});
})

我在你的网站上测试了这两种方法，它们看起来都能正常工作

另一种选择是创建一个类来添加和删除元素，而不是更改元素的内联CSS：

CSS--

JS--

---

您正在将鼠标底部按钮上的背景位置更改回

0px 0px

，该按钮将内联样式应用于该元素，这将覆盖在别处定义的CSS类。您要做的是在鼠标移出时删除背景位置属性，这样它将再次开始关注您的类

.mouseout(function(){
    $('li').css({backgroundPosition: ''});
})

---

您正在将鼠标底部按钮上的背景位置更改回

0px 0px

，该按钮将内联样式应用于该元素，这将覆盖在别处定义的CSS类。您要做的是在鼠标移出时删除背景位置属性，这样它将再次开始关注您的类

.mouseout(function(){
    $('li').css({backgroundPosition: ''});
})

---

由于Javascript设置了

li

元素的内联

style

属性，因此样式表的声明被否决。您可以通过添加

来解决此问题！重要提示

至

末尾：悬停

背景位置

声明：

li:hover {
    background-position : 0 -130px !important;
}

另外，我注意到您的jQuery有点奇怪

您有一个

hover（）

函数，然后是一个

mouseout（）

。您可以将两者结合使用，并使用更少的空间：

$(document).ready(function(){
    $('.powerRoll').hover(function(){
        $('li').css("background-position","0 -130px");
    }, function(){
        $('li').css("background-position","0px 0px");
    });
});

更好的是，您可以使用Javascript“清除”该属性，使其继承悬停时的样式表：

$(document).ready(function(){
    $('.powerRoll').hover(function(){
        $('li').css("background-position","0 -130px");
    }, function(){
        $('li').css("background-position","");
    });
});

---

最后，您会注意到我修改了

css（）

函数的语法。这是因为您不需要括号，因为您只更改一个属性的值。

由于您的Javascript设置了

li

元素的内联

style

属性，因此样式表的声明被否决。您可以通过添加

来解决此问题！重要提示

至

末尾：悬停

背景位置

声明：

li:hover {
    background-position : 0 -130px !important;
}

另外，我注意到您的jQuery有点奇怪

您有一个

hover（）

函数，然后是一个

mouseout（）

。您可以将两者结合使用，并使用更少的空间：

$(document).ready(function(){
    $('.powerRoll').hover(function(){
        $('li').css("background-position","0 -130px");
    }, function(){
        $('li').css("background-position","0px 0px");
    });
});

更好的是，您可以使用Javascript“清除”该属性，使其继承悬停时的样式表：

$(document).ready(function(){
    $('.powerRoll').hover(function(){
        $('li').css("background-position","0 -130px");
    }, function(){
        $('li').css("background-position","");
    });
});

---

最后，您会注意到我修改了

css（）

函数的语法。这是因为您不需要括号，因为您只更改一个属性的值。

谢谢大家！花了整整一天的时间。如此接近，但迄今为止。我迫不及待地想进一步了解这一点。我发现这在ie（同样的原始问题）中不起作用。有什么想法吗？在所有其他浏览器上都能很好地工作。再次感谢你们！花了整整一天的时间。如此接近，但迄今为止。我迫不及待地想进一步了解这一点。我发现这在ie（同样的原始问题）中不起作用。有什么想法吗？在所有其他浏览器上都能很好地工作。又是唐克斯。