-1

我有一个照片库（轮播幻灯片样式），我想得到它，以便任何时候有人将鼠标悬停在其中一个图像上，特定于图像的内容会在单独的 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？请让我知道你的想法

4

3 回答 3

0

你可以用这个

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

http://jsfiddle.net/6nPyA/

于 2013-05-29T19:12:17.310 回答
0

是的，你可以用 css 做，这是你应该使用的规则

img.p1:hover + div#p1content {
 // code to make content visible
}
于 2013-05-29T19:14:31.683 回答
0

使用 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();
});

小提琴

于 2013-05-29T19:18:50.803 回答