这是:hover在CSS3中使用伪元素。
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>?
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
相反，这是使用jquery达到相同结果的一种方式：
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>?
#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
$('.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/>值即可添加多个图像和标题，只需复制我使用的格式即可：用class="hover"和插入图像class="text"
602392714
清零编程群