如何在没有 JavaScript 的情况下在鼠标悬停在图像上时显示文本？-css教程-PHP中文网

如何在没有 JavaScript 的情况下在鼠标悬停在图像上时显示文本？

Barbara Streisand

发布： 2024-11-06 22:56:03

原创

875 人浏览过

How to Display Text on Mouseover of an Image Without JavaScript?

鼠标悬停在图像上时显示文本

您希望在图像的左下角显示一个包含超链接的小框，当鼠标悬停在其上。为了在不使用 JavaScript 的情况下实现此目的，我们提出了两种 CSS 解决方案：

CSS3 解决方案：

使用 CSS3 :hover 伪元素：

<div>

登录后复制

#wrapper .text {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}

#wrapper:hover .text {
    visibility: visible;
}

登录后复制

jQuery 解决方案：

<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");
});

登录后复制

记住在 HTML 头中包含 jQuery 库：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

登录后复制

以上是如何在没有 JavaScript 的情况下在鼠标悬停在图像上时显示文本？的详细内容。更多信息请关注PHP中文网其他相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

如何在没有 JavaScript 的情况下在鼠标悬停在图像上时显示文本？