css实现移入文字顶部出现提示的效果

最新推荐文章于 2022-05-13 11:47:25 发布

weixin_33911824

最新推荐文章于 2022-05-13 11:47:25 发布

阅读量641

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/studyh5/p/10193914.html

版权

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯css实现移入文字出现提示框（position：absolute 和伪类元素）</title>
<style>
.tips[data-title]{position:relative;top:40px;}
.tips[data-title]::before,.tips[data-title]::after{
position:absolute;left:50%;transform:translateX(-50%);visibility:hidden;
}
.tips[data-title]::before{
content:attr(data-title);top:-47px;padding:2px 10px 3px;line-height: 18px;border-radius:2px;background-color:#333;text-align: left;color:#fff;font-size:12px;
}
.tips[data-title]::after{
content:"";border:6px solid transparent;border-top-color:#333;top:-7px;
}
.tips[data-title]:hover::before,.tips[data-title]:hover::after{transition:visibility .1s .1s;visibility:visible;}
.icon-delete{display:inline-block;width:20px;height:20px;background:url('https://demo.cssworld.cn/images/6/delete@2x.png') no-repeat center;font-size:16px;color:transparent;}
</style>
</head>
<body>
<a href="javascript:" class="icon-delete tips" data-title="删除">删除</a>
</body>
</html>