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

你可以用这个

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

http://jsfiddle.net/6nPyA/

Answer 2

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

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

Answer 3

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

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

3 个答案: