html鼠标悬停图片释义文字消失,图像鼠标悬停时显示文字？

小编典典

这是:hover在CSS3中使用伪元素。

HTML：

text

​

CSS：

#wrapper .text {

position:relative;

bottom:30px;

left:0px;

visibility:hidden;

}

#wrapper:hover .text {

visibility:visible;

}

相反，这是使用jquery达到相同结果的一种方式：

HTML：

text

​

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库包含在 头部， 如下所示：

当您想在网站上使用它时，只需更改其值即可添加多个图像和标题，只需复制我使用的格式即可：用class="hover"和插入图像class="text"

2020-05-16