I'm trying to use jQuery (aware that @media query would be probably easier as CSS only solution) to have background images fade in and out on on selected words of a text with a .hover() event.

As all the images have the same CSS properties, they share the same class, and (obviously) jQuery doesn't make the distinction of which specific one to fade in/out, if not instructed to do so. Which is what I am struggling with.

Here the basic HTML structure. <p> has the CSS property display: inline; and I'm using <span> to select the desired words.

1. <div>
2.       <p>Text text text text <span>SHOW IMAGE
3.             <div class="bg">
4.                   <img src="image.jpg"/>
5.             </div></span>
6.       </p>
7.       <p>other text other text <span>SHOW OTHER IMAGE
8.            <div class="bg">
9.                  <img src="other-image.jpg"/>
10.             </div></span>
11.       </p>
12. </div>

The script is as follows. It works, but the result is that it shows always the last image on the HTML. I've tried out option with 'this', or $(this).siblings('.bg'), and even .find(), but none of them worked. 

It's surely very simple, but can't figure it out ;)

Many thanks!

antonio

1. var main = function () {
2.       $('span').hover(function() {
3.       $('span').css('cursor','pointer');
4.       $('.bg').fadeIn();
5. }, function(){
6. $('.bg').fadeOut();
7. });
8. }
9. $(document).ready(main);