CSS background position a:hover rollover, changing other elements?

Question

Hi,

You know when you use the CSS background-position property for rollovers, right?

Roll over element 1, the a:hover property changes background to position-x/y
Roll over element 2, the a:hover property changes background to position-x/y
And so forth.

What I need to achieve this time, is:

(lets say its 4 list elements we have)

Roll over li 1, background on li 2, 3 and 4 changes.
Roll over li 2, background on li 2, 3 and 4 changes.
Roll over li 3, background on li 1, 2,and 4 changes.
And so forth...

Now, I have thought long and hard and Im pretty sure in thinking that this CANT be done with CSS and I will need to look at using jquery, am I correct?

Thanks in advance.
Rob

Answer 1

Yes you are correct

Answer 2

Assuming that you mean that the non-hovered lis have the same background:

jQuery

Here's some sample jquery code that ought to work. Just add the class "nav" to the <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

However, it is possible using 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;
}

Remember, IE only supports :hover on <a> tags in quirks mode.

Answer 3

Correct. For example, with the following HTML (assuming you want different offsets for each element, hence giving them all an id):

<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>

you can do:

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

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