1

我正在使用 jQuery caroufredsel，我想为我的项目添加一个标题。
我知道这可以使用这个解决方案来解决，但我正在使用这种方式并且我没有li：

<div id="foo2">
    <img src="Images\01.jpg" width="150"/>
    <img src="Images\02.jpg" width="150" />
    <img src="Images\03.jpg" width="150" />
    <img src="Images\04.jpg" width="150" />
    <img src="Images\05.jpg" width="150" />
    <img src="Images\06.jpg" width="150" />
    <img src="Images\07.jpg" width="150" />
</div>

使用少量代码悬停效果时，如何在图像上显示标题？

4

2 回答 2

5

在你的 HTML 代码中试试这个：

<div id="foo2">
   <img src="Images\01.jpg" width="150" /><span>image 1</span>
   <img src="Images\02.jpg" width="150" /><span>image 2</span>
   <img src="Images\03.jpg" width="150" /><span>image 3</span>
   <img src="Images\04.jpg" width="150" /><span>image 4</span>
   <img src="Images\05.jpg" width="150" /><span>image 5</span>
   <img src="Images\06.jpg" width="150" /><span>image 6</span>
   <img src="Images\07.jpg" width="150" /><span>image 7</span>
</div>

在你的 CSS 中：

#foo2 img {
    padding-bottom:15px;
}
#foo2 span {
    width:150px;
    text-align:center;
    display:inline-block;
    margin-left:-150px;
}

这是我的工作小提琴http://jsfiddle.net/ponrajpaul/quAqS/

在鼠标悬停时显示标题

脚本

$(document).ready(function(){    
  $("#foo2 img").hover(function () {       
    $(this).next().css({"display" : "inline-block"});
  },function () {       
    $(this).next().css({"display" : "none"}); 
  });
});

并更新跨度上的CSS 更改显示值

#foo2 span {
    width:150px;
    text-align:center;
    display:none;
    margin-left:-150px;
}

检查我新更新的小提琴http://jsfiddle.net/ponrajpaul/quAqS/1/

2017 年 9 月 8 日更新

同样可以通过纯 CSS 实现，无需 Javascript。谢谢@Elise Chant

 #foo2 span{
   display: none;
 }
 #foo2 img:hover + span{
   display: inline-block;
 }

也有很好的浏览器支持https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

更新小提琴http://jsfiddle.net/ponrajpaul/quAqS/20/

于 2013-06-04T06:36:14.037 回答
0

使用 CSS 在悬停时显示您的字幕。

span {
  display: none;
}

#foo2:hover + span {
  display: inline-block;
}
于 2014-02-12T01:43:35.597 回答