图像悬停在单独的 div 中显示内容

Question

我有一个照片库（轮播幻灯片样式），我想得到它，以便任何时候有人将鼠标悬停在其中一张图片上，图片特定的内容会在单独的 div 中填充到图片下方。这是我的代码示例：

<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>

我可以使用带有悬停功能的 CSS 显示属性来完成此操作吗？也许是 jQuery？请告诉我你的想法

Answer 1

使用 jQuery 和以下 HTMl 结构

<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

Answer 2

你可以用这个

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

http://jsfiddle.net/6nPyA/

Answer 3

是的，你可以用 css 做，这里你应该使用什么作为规则

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