jQuery selective hover
- by Vitor
Hello everyone,
I'm trying to do a simple task with jQuery: I have a list of words which, when hovered, should fadeIn its corresponding image. For example:
<a href="#" class="yellow">Yellow</a>
<a href="#" class="blue">Blue</a>
<a href="#" class="green">Green</a>
<img src="yellow.jpg" class="yellow">
<img src="blue.jpg" class="blue">
<img src="green.jpg" class="green">
I'm currently doing it this way for each link/image:
$('a.yellow').hover(
function () {
$('img.yellow').fadeIn('fast');
},
function () {
$('img.yellow').fadeOut('fast');
});
The method above works fine, but as I'm still learning, I guess there's a better way to do that instead of repeating functions.
Can anyone give me some light here? How can I improve this code?
