How to make a certain div visible while hovering an image?

Question

<div class="parent">
   <div class="parent.child">
      <a href="#"></a>
      <div class="parent.chil.child">
          <div class="parent.chil.child.child">
               <img src ="link0" >
               <img src ="link1" >
               <img src ="link2" >
          </div>
      </div>
   </div>
   <h4>
      <a href= "aspPage.aspx">text</a>
   </h4>
   <div class="imgClass0">
       <p>some text</p>
    </div>
   <div class="imgClass1">
       <p>some text</p>
    </div>
   <div class="imgClass2">
       <p>some text</p>
</div>

Hey guys !

I have a problem. I have a div whithin I can have one or more <img> nodes, depends how the server generates the DOM (there can be one or many, depends on a number from the database. There are several <div> elements under the <h4> node, the number of them is equal to the number of <img> elements from above.

I need help in making a javascript that makes "imgClass1" visible when I hover <img src ="link1" >, and the other imgClassX, X=(1..n) invisible, and so on. I give them default visibility display:none, but I need imgClass0 to have default visibility:visible.

Best regards, iusmar.

Answer 1

You can attribute starts with selector along with :eq() selector:

$('img[src^=link]').hover(function() {
    var idx = $(this).index();
    $('div[class^="imgClass"]:eq(' + idx + ')').show();
}, function() {
    var idx = $(this).index();
    $('div[class^="imgClass"]:eq(' + idx + ')').hide();
});

Fiddle Demo

Answer 2

try like this

$("img[src=link1]").hover(function(){
$("div[class^='imgClass']").hide();
$(".imgClass1").show();
});

fiddle

Answer 3

First, you should put a class on your images to use as a selector. You should also put the image ID as a data attribute on the tags. This will allow you to easily assign an event handler when hovering these images, and also easily extract the image ID:

<img src="link0" class="yourImages" data-image-id="0">
<img src="link1" class="yourImages" data-image-id="1">
<img src="link2" class="yourImages" data-image-id="2">

You could also apply that ID to the divs:

<div class="images" data-image-id="0">
    <p>some text</p>
</div>
<div class="images" data-image-id="1">
    <p>some text</p>
</div>
<div class="images" data-image-id="2">
    <p>some text</p>
</div>

Then you can bind a hover handler to the yourImages class, get the ID from the hovered element, hide all image divs then show only the required one:

$('.yourImages').hover(function() {
    var imageID = $(this).data('image-id');

    $('.images').hide();
    $('.images[data-image-id="' + imageID + '"]').show();
}, function() {
    $('.images').hide();
});

What do you want to do when you stop hovering over any images? My example just hides them all again.

Answer 4

Add a class / id just like following for the images

 <img class="img0" src ="link0" >
    <img class="img1" src ="link1" >
    <img class="img2" src ="link2" >

and try the following javascript

$("img").hover(function (){     
            var cls=$(this).attr("class");
            $("div[class^='imgClass']").hide();
            var visibleCls=".imgClass"+(parseInt(cls.replace("img","")));
            $(visibleCls).show();
        });