0

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.

1
  • 3
    Not particularly. I don't completely understand, sorry. May 20, 2010 at 10:31

4 Answers 4

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.

1
0

Use Jquery.mouseout() to remove the background.

0

You can use the jquery selectors

example

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.