Question

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

什么不起作用，一旦你将鼠标悬停在调用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正在设置内联CSS，它用在样式表中声明的CSS上。

您可以将!important添加到每个列表项元素的背景位置的类声明中。

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 -

li:hover, li.hover {
     background-position : 0 -130px;
}

JS -

$('.powerRoll').mouseover(function(){
    $('li').addClass('hover');
})
.mouseout(function(){
    $('li').removeClass('hover');
})

Answer 2

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

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

Answer 3

您正在将鼠标移出最底部按钮时将背景位置更改回0px 0px，这会将内嵌样式应用于该元素，该样式将覆盖您在其他位置定义的CSS类。您想要做的是鼠标输出时删除背景位置属性，因此它会再次开始关注您的课程。

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

See the jsFiddle.

背景位置问题

3 个答案: