将图片悬停在单独的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使用和以下HTM1结构

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