使用jQuery更改背景位置

我想在悬停li元素时更改CSS类的背景位置

HTML:

<div id="carousel">
    <ul id="submenu">
        <li>Apple</li>
        <li>Orange</li>
    </ul>
</div>

---

有什么建议吗？

当

子菜单

div中的一个li悬停时，为

旋转木马

div上的

背景位置

设置新值。悬停结束时删除

backgroundPosition

，并将

backgroundPosition

重置为旧值

$('#submenu li').hover(function(){
    $('#carousel').css('backgroundPosition', newValue);
});

$('#submenu li').hover(function() {
    if ($('#carousel').data('oldbackgroundPosition')==undefined) {
        $('#carousel').data('oldbackgroundPosition', $('#carousel').css('backgroundPosition'));
    }
    $('#carousel').css('backgroundPosition', [enternewvaluehere]);
},
function() {
    var reset = '';
    if ($('#carousel').data('oldbackgroundPosition') != undefined) {
        reset = $('#carousel').data('oldbackgroundPosition');
        $('#carousel').removeData('oldbackgroundPosition');
    }
    $('#carousel').css('backgroundPosition', reset);
});

给你：

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position', '10px 10px');
    }, function(){
        $('#carousel').css('background-position', '');
    });
});

---

你们把事情搞复杂了。您可以通过CSS简单地执行此操作

#carousel li { background-position:0px 0px; }
#carousel li:hover { background-position:100px 0px; }

---

Rebession上面的回答实际上不起作用，因为对CSS来说，“background position”实际上是“background-position-x”和“background-position-y”的简写，所以他的代码的正确版本应该是：

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position-x', newValueX);
        $('#carousel').css('background-position-y', newValue);
    }, function(){
        $('#carousel').css('background-position-x', oldValueX);
        $('#carousel').css('background-position-y', oldValueY);
    });
});

---

我花了大约4个小时的时间才意识到这一点。

实际上是不完整的。悬停停止时不重置背景位置。由于它不这样做，也不认为已经有可能有意义的值设置为后台位置，需要恢复良好，这就是他所要求的JITTE。重读问题：“在悬停li元素时。”这对我来说意味着“我希望悬停停止时重置它”不，它不会抖动。如果它说“当鼠标悬停在一个li元素上时，那么当鼠标悬停停止时，我希望它重置”，那么它将暗示您的意思。很抱歉这么小气，但是几个月前你留下的评论真的让我很生气。

newValue

的有效值是多少？它是一根绳子吗？它的格式是什么？他正在更改“css属性backgroundPosition”，更多详细信息请参见：@Neil更新了Jakub的URL，用于w3schools背景位置：。这就解释了newValue的有效值可能是什么。通常是这样的字符串：

5px 10px

其中第一个值是左偏移量，第二个值是上偏移量

%

，

em

等都很好，而且

px

。不要忘记，因为它会将容器中的图像向左和向下推，所以您需要负值，除非您希望图像环绕到另一侧。@meo我很想说“谁在乎？”但是啊。IE6.IE6终于死了，连微软都不在乎。每个人都知道IE6是撒旦的化身。任何仍在使用IE6的人要么是邪恶的伙伴，要么是政府雇员。这在某些浏览器中有效，但在Firefox中无效：-例如，Firefox甚至在jQuery v2中也忽略了它，

$(document).ready(function(){
    $('#submenu li').hover(function(){
        $('#carousel').css('background-position-x', newValueX);
        $('#carousel').css('background-position-y', newValue);
    }, function(){
        $('#carousel').css('background-position-x', oldValueX);
        $('#carousel').css('background-position-y', oldValueY);
    });
});