图像鼠标悬停时显示文字？

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图当鼠标移到图像的左下方时出现一个小框。在该框内，将有一个指向其他页面的链接。

这有点类似于我想要的东西，但是盒子要更小并且不连接到图像的边框。

我已经尝试了一切，但找不到答案。而且我不想使用工具提示，更不用说我没有任何JavaScript知识了。我真的希望这是CSS。

回答：

这是: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"

以上是 图像鼠标悬停时显示文字？ 的全部内容， 来源链接： utcz.com/qa/426910.html

回到顶部