分享一段代码实例，它利用css实现了鼠标悬浮弹出tips效果。
更多特效可以查阅特效板块鼠标tips信息分类。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
div {
position: relative;
width: 120px;
line-height: 38px;
margin: 100px auto;
color: #333;
text-align: center;
font-size: 24px;
cursor: pointer;
}
div:hover::before {
content: attr(data-msg);
position: absolute;
top: -50px;
left: 10px;
padding: 2px 6px;
display: inline-block;
color: #333;
border: 1px solid #333;
border-radius: 5px;
font-size: 14px;
}
div:hover::after {
content: "";
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
top: -6px;
left: 60px;
}
</style>
</head>
<body>
<div data-msg="www.pipipi.net">鼠标悬浮</div>
</body>
</html>
上面的代码实现了我们的要求，代码比较简单，更多内容可以参阅相关阅读。
相关阅读:
（1）.content可以参阅css content一章节。
（2）.border-radius可以参阅CSS3 border-radius圆角一章节。
（3）.::before可以参阅CSS E:before/E::before一章节。
css鼠标悬浮tips效果代码实例，这样的场景在实际项目中还是用的比较多的，关于css鼠标悬浮tips效果代码实例就介绍到这了。
css鼠标悬浮tips效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。
本文地址： http://www.zzsi.net/code/web/98439.html
本站部分资源来源与网络，仅供学习参考使用，请勿商用，如侵犯了您的权益，请联系我们删除。
上一篇: 自定义事件解决重复请求BUG的问题
下一篇: ReactNative实现图片上传功能的示例代码
