Image hover displaying content in separate div

Question

I have a photo gallery (carousel slideshow style) and I'd like to get it so that anytime someone hovers over one of the images, image-specific content is populated below the image in a separate div. Here is a example of my code:

<div class="window">
<div class="slide">
    <img class="p1" src="xxxxxx1.jpg" alt="" aria-haspopup="true" />
    <img class="p2" src="xxxxxx2.jpg" alt="" aria-haspopup="true" />
    <img class="p3" src="xxxxxx3.jpg" alt="" aria-haspopup="true" />
    <img class="p4" src="xxxxxx4.jpg" alt="" aria-haspopup="true" />
</div>
<div id="p1content">
      <!--Image-related content--> 
</div>
<!--div for content of p2, p3, p4, etc-->
</div>

Could I use CSS display properties with hover to accomplish this? Maybe jQuery? Please let me know your thoughts

you can do this only with css checkout my answer – Rohit Agrawal May 29 '13 at 19:18 — Rohit Agrawal, May 29 '13 at 19:18

score 0 · Answer 1 · answered May 29 '13 at 19:12

0

you can use this

$('.slide img').hover(
function(){
   $('#p1content').append($(this).clone());    
},
function(){
   $('#p1content').children().remove()
});

http://jsfiddle.net/6nPyA/

answered May 29 '13 at 19:12

Michael Aguilar

766
8
16

score 0 · Answer 2 · answered May 29 '13 at 19:14

0

yes you can do with css , here what you should use as a rule

img.p1:hover + div#p1content {
 // code to make content visible
}

answered May 29 '13 at 19:14

Rohit Agrawal

5,372
5
19
30

Spokey · Accepted Answer · 2013-05-29T21:58:12.263

With jQuery and the following HTMl structure

<div class="window">
<div class="slide">
    <img class="p1" src="xxxxxx1.jpg" alt="" aria-haspopup="true" />
    <img class="p2" src="xxxxxx2.jpg" alt="" aria-haspopup="true" />
    <img class="p3" src="xxxxxx3.jpg" alt="" aria-haspopup="true" />
    <img class="p4" src="xxxxxx4.jpg" alt="" aria-haspopup="true" />
</div>
<div id="p1content"> <!-- the divs inside have display:none -->
      <div>Content for p1</div>
      <div>Content for p2</div>
      <div>Content for p3</div>
      <div>Content for p4</div>
</div>
<!--div for content of p2, p3, p4, etc-->
</div>

JS

$('.slide img').hover(function(){
   var in = $(this).index();
   $('#p1content div:eq('+in+')').show();
}, function() {
   $('#p1content div').hide();
});

FIDDLE

@Scott sorry, I corrected it now. [see this fiddle](http://jsfiddle.net/Spokey/ACXKU/1/) — Spokey, May 29 '13 at 21:59

Image hover displaying content in separate div

3 Answers3