Question

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

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.