Question

我正在使用jQuery caroufredsel，我希望我的项目有标题我知道这可以使用this solution解决，但我使用这种方式而且我没有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>

当使用一些小代码悬停效果时，如何在我的图像上显示标题？

Answer 1

在您的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/

显示鼠标悬停的标题

<强> SCRIPT

$(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/

更新时间：9/8/2017

同样可以通过纯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/

Answer 2

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

span {
  display: none;
}

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

悬停时为图像添加标题

2 个答案: