Изменение фоновой позиции с помощью jQuery
Я хотел бы изменить фоновое положение CSS-класса при наведении курсора на li-элемент.
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 ответов
здесь вы идете:
$(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; }
ответ rebellion выше на самом деле не будет работать, потому что для 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 часов удара головой об него, чтобы прийти к этому отягчающему осознанию.
устанавливает новое значение backgroundPosition
на carousel
div, когда Ли в submenu
div завис. Удаляет backgroundPosition
при наведении курсора заканчивается и сбрасывается backgroundPosition
старое значение.
$('#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);
});