CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)
发布时间：2025-03-10 11:08:17 作者：朝阳39 
我要评论
我要评论本文介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示，感兴趣的朋友一起看看吧
效果
原理
- 提示内容的定位：子绝父相
- 鼠标悬浮前，提示内容
visibility: hidden; - 通过
:hover触发鼠标悬浮样式，提示内容变为visibility: visible;
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 模拟 HTML title 效果（兼容旧浏览器）</title>
<style>
/* 基本样式设置 */
.tipBox {
position: relative;
display: inline-block;
}
/* 定义提示框样式，初始隐藏 */
.tipBox .tipContent {
position: absolute;
top: 100%;
left: 50%;
color: rgb(105, 100, 100);
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 2px;
font-size: 12px;
padding: 2px 4px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
white-space: nowrap;
visibility: hidden;
}
/* 鼠标悬停时显示提示框 */
.tipBox:hover .tipContent {
visibility: visible;
}
</style>
</head>
<body style="padding: 40px">
<h1>title 效果</h1>
<div title="12345678">12345678</div>
<h1>css 模拟 title 效果</h1>
<div class="tipBox">
12345678
<div class="tipContent">12345678</div>
</div>
</body>
</html>到此这篇关于CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)的文章就介绍到这了,更多相关css html title属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 这篇文章主要为大家介绍了css实现鼠标悬停时滑出层提示的方法,可实现鼠标悬浮于文字上弹出提示层的效果,非常具有实用价值,需要的朋友可以参考下2015-05-11
CSS selector:div.title p代表的是什么意思(通俗易懂)
有很多的新手朋友们可能都不知道CSS selector:div.title p代表的是什么意思， 其实就是满足三个条件的元素会被css渲染，不会的朋友可以参考下2013-11-04CSS属性选择器的四种格式-CSS教程-网页制作-网页教学网
属性选择器（AttributeSelectors），或许你不应该对属性选择器感到陌生，从本质上说，id跟类选择器其实就是属性选择器，只不过是选择了id或者类的值（value）而已。2008-10-17
最新评论