Положение фона CSS a: при наведении курсора, изменении других элементов?

Question

Вы знаете, когда используете свойство background-position CSS для ролловеров, верно?

При наведении на элемент 1 свойство a: hover меняет фон на position-x / y
При наведении на элемент 2 свойство a: hover меняет фон на position-x / y
И пр.

Что мне нужно для достижения этого времени, это:

(скажем, у нас есть 4 элемента списка)

Переверните ли 1, фон на ли 2, 3 и 4 изменениях.
Переверните li 2, измените фон на li 2, 3 и 4.
Переверните li 3, измените фон на li 1, 2 и 4.
И так далее ...

Теперь, я думал долго и трудно, и Im уверен, думая, что это косяк быть сделано с помощью CSS, и мне нужно будет посмотреть на использование JQuery, я правильно?

Заранее спасибо.
Rob

Answer 1

Предполагая, что вы имеете в виду, что у не зависших li s есть тот же фон:

JQuery

Вот пример кода JQuery, который должен работать. Просто добавьте класс "nav" к <li> s

$(document).ready(function()
{
    $("li.nav").hover(
    function()
    {
        $("li.nav").css("background-image","url(newimage)");
        $(this).css("background-image","url(oldimage)");    
    },
    function()
    {
        $("li.nav").css("background-image","url(oldimage)");
    });
});

CSS

Однако, возможно с использованием CSS:

HTML:

<ul class="nav">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

CSS:

ul.nav:hover li
{
    background-image: newimage;
}
ul.nav li:hover
{
    background-image: oldimage;
}

Помните, IE поддерживает только :hover для <a> тегов в режиме причуд.

Answer 2

Правильно. Например, со следующим HTML-кодом (при условии, что вы хотите разные смещения для каждого элемента, следовательно, присваивая им всем идентификатор):

<ul>
    <li id="foo">Item 1</li>
    <li id="bar">Item 2</li>
    <li id="baz">Item 3</li>
    <li id="yup">Item 4</li>
</ul>

Вы можете сделать:

$(document).ready( function() {
    $('#foo').mouseenter( function() {
        $('#foo').css( 'background-position-y', '20px' );
            ...
    })

    $('#foo').mouseleave( function() {
        $('#foo').css( 'background-position-y', '0px' );
        ...
    })
});

Answer 3

Да, вы правы