提示工具(提示文本)

原创 1948712434 随笔 CSS 173阅读 2018-01-02 15:57:50 举报

先做一个简单的提示工具的效果,这样可以很容易了解提示工具的步骤。
下面就是简单的提示工具代码:
<body>
<div class="tooltip">鼠标放到这显示效果
<span class="tooltiptext">提示文本</span>
</div>
</body>
我们写代码一般都是先写HTML,再写CSS,下面的就是CSS了:
<style>
.tooltip {
text-align:center;
color:blue;
}
.tooltiptext {
background-color:black;
color:white;
visibility:hidden;
}
.tooltip:hover(空一格).tooltip{
visibility:visible;
}
</style>
下面就是效果图了:

提示工具(提示文本)

提示工具(提示文本)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复