jquery - 背景位置问题

Question

我有一个带有一堆 li 的 ul，它们都有不同的背景图像。 当您将鼠标悬停在每一里时，您将获得预期的翻转背景位置更改。 我还应用了一个触发 jquery 函数的按钮 同时将背景位置更改应用于每一里。 这也按预期工作。

不起作用的是，一旦您将鼠标悬停在调用 jquery 的按钮上， 您无法再成功地将 lis 单独悬停。

这是工作(或不工作)的例子... http://www.weirdesigns.com/simple/ 先滚动圆圈，尝试按钮，然后再次尝试圆圈，它们不再起作用了？？？请帮助...

这是我的 jQuery:

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

Answer 1

由于您的 Javascript 设置了 li 元素的内联 style 属性，样式表的声明被否决了。您可以通过在 :hover background-position 声明的末尾添加 !important 来解决此问题:

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() 函数的语法。这是因为您不需要括号，因为您只是更改一个属性的值。