Changing the background of other link on hover of the First link.

Question

I have the following mark up.

<ul>
<li><a><span>link-1</span></a></li>
<li><a><span>link-2</span></a></li>
<li><a><span>link-3</span></a></li>
</ul>

When user hover on the first 'a' then the next a tag in LI , we remove the backgorund-image.

I hope you are clear what I want to do with this.

Answer 1

Use Jquery.mouseout() to remove the background.

Answer 2

I think you can do something like this

$('#linka').mouseover(function() {
     $(this).attr('class','somethingrandom'); //so that you can change remaining with ease
     $('.remaininga').removeclass('yourclass'); //whether add a new or remove
}).mouseout(function() {
     $(this).attr('class','remaininga');  //to bring back to previous state
});

What you actually need to do from my point, is change the class name each time so that you can change the class of remaining

Answer 3

You can use the jquery selectors

example

$('ul:eq(0) > li').css('background','none')

Answer 4

You don't need JavaScript - hurray for CSS skills!

You can do it with the adjacent selector (+ CSS selector), try hovering on a link in your HTML while using this CSS:

ul li a {
    color: red
}
ul li:hover+li a {
    color: blue
}

(JSFiddle is a good testing ground.)

Why you'd want something with such a low usability is beyond my comprehension.
But perhaps it makes sence, in your scenario.