css 提示效果

来源：互联网发布：内蒙古人民出版社知乎编辑：程序博客网时间：2024/06/04 18:09

1.重点了解的是display属性中的 inline-block 值,而在w3cschool文档中没有写这个值

display : inline, 此元素会被你现实为内联元素

display : inline-block ,讲对象呈递为内联对象,旁边的内联对象会被呈递为同一行内,并允许空格;同时它也可以实现浮动布局

以下为提示文本的一个demo源码,来来至 https://www.runoob.com/try/try.php?filename=trycss_tooltip

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* 定位 */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">

<div class="tooltip">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

阅读全文

0 0