Skip to main content

jQuery: How to apply an effect to an element that shares a name with other elements



I am trying to write some code where a description box pops over an image when I hover over it. I have multiple images on my page which sort of looks like this:







<div class="image">

<a href="?page=page1>"><img src="images/1.jpg" width="220" height="220"></a>

</div>

<div class="description" style="display: none;"> description 1 </div>



<div class="image">

<a href="?page=page2>"><img src="images/2.jpg" width="220" height="220"></a>

</div>

<div class="description" style="display: none;"> description 2 </div>



<div class="image">

<a href="?page=page3"><img src="images/3.jpg" width="220" height="220"></a>

</div>

<div class="description" style="display: none;"> description 3 </div>







I am not very well versed in jQuery or Javascript but I have come up with this code that displays the description when ever you hover over the image:







$(".image").hover(function() {

$(".description").fadeToggle();

});







The problem with this code is that when you over over any of the images, ALL of the description pop up. What must I add in to my jQuery code so that only the description of the image you are hover over pops up?





I have created a jsfiddle to help understand my problem: http://jsfiddle.net/qnWpy/ (also the description blinks erratically when I hover over or around the image, why's that?)


Comments

Popular posts from this blog

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?