Использование jQuery для изменения положения фона спрайта в CSS для всех элементов

У меня есть спрайт изображения, который является фоном основного блока, с дюжиной ссылок внутри него. Вместо того, чтобы записывать значения background-position в файл CSS для каждой ссылки при наведении курсора, я хочу сделать это в jQuery, чтобы background-position y увеличился на 550 пикселей (позиция x останется прежней).

Разметка:

<div class="compass">
    <a class="facebook" href="#">&nbsp;</a>
    <a class="twitter" href="#">&nbsp;</a>
    <a class="youtube" href="#">&nbsp;</a>
</div>

CSS:

.compass {
    background-image: url('../images/compass.png');
    background-position: top;
    height: 550px;
    position: relative;
    width: 567px;
    margin: 0 auto;
}
.compass a{
    background-image: url('../images/compass.png');
    background-position: top;
    display: block;
    position: absolute;
}
a.facebook {
    height: 51px;
    width: 26px;
    left: 151px;
    top: 190px;
}

Итак, идея состоит в том, чтобы написать стиль правила CSS для каждой ссылки, указывающий позиции x и y фонового изображения. Затем, при наведении, позиция по оси Y увеличится на 550 пикселей. При отключении мыши он вернется к горячему состоянию (уменьшение на 550 пикселей).

Я начал синтаксис jQuery, но не могу понять:

var originalPosition = obj.css('background-position');
$(".compass a").hover(
    function(){
        $(this).css('backgroundPosition', originalPosition + 550 + "px")
    },
    function(){
        $(this).css('backgroundPosition', "");
    }
)

Всем большое спасибо!


jquery css background sprite background-position
person Tarek Shalaby    schedule 20.08.2012    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Отредактировано для работы в FF.

$(".compass a").hover(function() {
    var bgpos = $(this).css('backgroundPosition').split(' ');
    $(this).css('backgroundPosition', bgpos[0] + ' ' + (parseInt(bgpos[1],10)+550) + 'px');
}, function() {
    var bgpos = $(this).css('backgroundPosition').split(' ');
    $(this).css('backgroundPosition', bgpos[0] + ' ' + (parseInt(bgpos[1],10)-550) + 'px');
});

Скрипка

Кредиты на этот ответ для взлома FF.

person Fabrício Matté    schedule 20.08.2012
comment
Это имеет смысл. Я пытаюсь это сделать, но это не работает ... ммм - person Tarek Shalaby; 20.08.2012
comment
@TarekShalaby Работает в Chrome, но не в FF, скрипка. Попробую собрать хак для ФФ. - person Fabrício Matté; 20.08.2012
comment
@TarekShalaby Обновленный ответ, проверьте, полезен ли он сейчас. =] - person Fabrício Matté; 20.08.2012
comment
ИДЕАЛЬНО! Большое спасибо! - person Tarek Shalaby; 20.08.2012
comment
Я использовал это недавно и обнаружил, что IE8 поддерживает только «фоновое положение-x» и «фоновое положение-y», а не «фоновое положение». В то время как firefox поддерживает противоположное (другие браузеры более снисходительны и, похоже, поддерживают любой синтаксис). В конце концов, мое решение состояло в том, чтобы полностью отказаться от использования background-position для этой техники и вместо этого использовать ту же идею, но с дочерним div, и анимировать движение, обновив свойство «left». Вам понадобится position: absolute; в дочернем div и overflow:hidden в контейнере. Избегайте фоновой позиции! - person mike-source; 27.02.2015

arrow_upward
1
arrow_downward

Вам лучше создать позицию наведения и стандартные позиции фона как отдельные правила CSS и использовать addClass и removeClass.

$(".compass a").hover(
    function(){
        $(this).addClass('hoverIn');
    },
    function(){
        $(this).removeClass('hoverIn');
    }
);

CSS:

.compass a.hoverIn {
    background-position: 550px;
}
person bcmcfc    schedule 20.08.2012
comment
Разве это не то же самое, что использовать псевдоселектор CSS при наведении курсора? .compass a:hover вместо нового класса и не требуется jQuery. - person Fabrício Matté; 20.08.2012
comment
Проблема в том, что конечный результат не 550 пикселей, а (текущая позиция y) + 550 пикселей. Вот почему значение всегда будет динамическим в зависимости от исходной позиции y фонового изображения для этой конкретной ссылки. - person Tarek Shalaby; 20.08.2012

arrow_upward
1
arrow_downward

Проверьте это, только что сделанное для вас. Делает работу. http://jsfiddle.net/Anr24/

В качестве альтернативы, не лучше ли было бы просто определить атрибуты :hover в CSS?

Удачи!

person Chris Beemster    schedule 20.08.2012
comment
Спасибо! Однако это не работает даже в коде jsfiddle.net, который вы собрали. Наведение CSS не будет работать, потому что значение динамическое; Я хочу увеличить высоту на 550 пикселей, поэтому конечный результат зависит от исходного значения положения Y фонового изображения. - person Tarek Shalaby; 20.08.2012
comment
Код? Пояснение к коду? Ответы? Этого всем не хватает. - person rlemon; 20.08.2012

arrow_upward
0
arrow_downward

Если вы хотите добавить произвольную величину к значению позиции фона, попробуйте использовать +=X и -=X, где X — значение, которое нужно добавить/удалить.

Я могу ошибаться в деталях, но что-то вроде этого:

$(".compass a").hover(
    function(){
    $(this).css('backgroundPosition', '+=50px')
},
function(){
    $(this).css('backgroundPosition', '-=50px');
}
)

... должно сработать

Вот небольшая скрипка, чтобы показать вам, что я имею в виду:

http://jsfiddle.net/erinfreeman/Jj46m/

person efreeman    schedule 20.08.2012