这是
:hover在CSS3中使用伪元素。
HTML：
<div id="wrapper"> <img src="http://placehold.it/300x200" /> <p >text</p></div>
CSS：
#wrapper .text {position:relative;bottom:30px;left:0px;visibility:hidden;}#wrapper:hover .text {visibility:visible;}相反，这是使用jquery达到相同结果的一种方式：
HTML：
<div id="wrapper"> <img src="http://placehold.it/300x200" /> <p >text</p></div>
CSS：
#wrapper p {position:relative;bottom:30px;left:0px;visibility:hidden;}jQuery代码：
$('.hover').mouseover(function() { $('.text').css("visibility","visible");});$('.hover').mouseout(function() { $('.text').css("visibility","hidden");});您可以将所需的jquery代码放在HTML页面的 主体 中，然后需要将jquery库包含在 头部， 如下所示：
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></head>
当您想在网站上使用它时，只需更改其
<imgsrc/>值即可添加多个图像和标题，只需复制我使用的格式即可：用和插入图像
