CODEWITHSUNDEEP
jquerycss
prevailrob
prevailrob

Reputation: 275

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

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

Upvotes: 1

Views: 1906

Answers (3)

Eric
Eric

Reputation: 97571

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.

Upvotes: 1

Olivier &#39;&#214;lbaum&#39; Scherler
Olivier &#39;&#214;lbaum&#39; Scherler

Reputation: 2146

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' );
        ...
    })
});

Upvotes: 0

Tim B&#252;the
Tim B&#252;the

Reputation: 63734

Yes you are correct

Upvotes: 0

Related Questions