使用jQuery更改背景位置
使用jQuery更改背景位置
提问于 2009-11-22 06:09:46
我希望在悬停li元素的同时更改CSS类的背景位置。
HTML：
<div id="carousel">
<ul id="submenu">
<li>Apple</li>
<li>Orange</li>
</ul>
</div>CSS：
#carousel {
float: left;
width: 960px;
height: 360px;
background: url(../images/carousel.png);
}对如何做到这一点有什么建议吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2009-11-22 06:31:42
这就是了：
$(document).ready(function(){
$('#submenu li').hover(function(){
$('#carousel').css('background-position', '10px 10px');
}, function(){
$('#carousel').css('background-position', '');
});
});Stack Overflow用户
发布于 2010-04-11 20:10:50
你们把事情搞复杂了。你可以在CSS中简单地做到这一点。
#carousel li { background-position:0px 0px; }
#carousel li:hover { background-position:100px 0px; }Stack Overflow用户
发布于 2013-04-19 01:20:32
rebellion上面的答案实际上是行不通的，因为对于CSS来说，“后台位置”实际上是“后台位置-x”和“后台位置-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个小时的时间才意识到这一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1776950
复制相关文章
相似问题
腾讯云开发者
