css 自定义悬浮框

最新推荐文章于 2022-07-30 09:54:15 发布

付月半子

最新推荐文章于 2022-07-30 09:54:15 发布

阅读量1.7k

点赞数 1

分类专栏： css

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

<html>
<head>
	 <meta charset="UTF-8">
    <title>自定义悬浮框</title>
    
</head>
<style>
      
/* 自定义悬浮框 begin */
.dui-tips {
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.dui-tips[data-tooltip]:after,
.dui-tips[data-tooltip]:before {
	visibility: hidden;
	position: absolute;
	top: 20%;
	left: 110%;
	transition: all .3s;
}
  
.dui-tips[data-tooltip]:after {
  
	content: attr(data-tooltip);
	transform: translate(-5px, -50%);
	white-space: pre;
	padding: 5px 20px;
	background-color: #253136;/* rgba(0, 0, 0, 0); */
	color: rgba(255, 255, 255, 0);
	opacity:0.9;
}
  
.dui-tips[data-tooltip]:before {
	content: '';
	height: 0;
	width: 0;
	transform: translate(-10px, -50%);
	border-width: 5px 5px 5px 0;
	border-style: solid;
	border-color: transparent #253136;/* rgba(0, 0, 0, 0); */ transparent transparent;
}
.dui-tips:hover:after,.dui-tips:hover:before {
	transition: all .3s;
	visibility: visible;
  
}
.dui-tips:hover:after {
	color: rgba(255, 255, 255, 1);
	background-color: #253136; /* rgba(0, 0, 0, 0.8); */
	transform: translate(5px, -50%);
}
  
.dui-tips:hover:before {
	border-color: transparent transparent transparent transparent;
	transform: translate(0px, -50%);
}
/* 自定义悬浮框 end */
</style>
<body>
<div class="dui-tips" data-tooltip="我是悬浮内容">HELLO WORLD!</div>
</body>
</html>

付月半子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 自定义悬浮框

<html><head> <meta charset="UTF-8"> <title>自定义悬浮框</title> </head><style> /* 自定义悬浮框 begin */.dui-tips { position: relative; ...
复制链接

扫一扫