May 20, 2010
Changing the background of other link on hover of the First link
Question by Wasim Shaikh
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 by ANeves
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.
Answer by Starx
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
