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?