我有一个输入文本框，当用户的鼠标悬停在该文本框上时，我想在该文本框上显示一些文本区域，向他提供有关要输入的文本的信息。这是我的HTML代码：
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
什么是最好的CSS技巧将有助于做到这一点？预先感谢您的帮助。
您可以使用CSS完成所有这些操作。使用CSS三角形作为工具提示，但是您主要要寻找的是使用:hover伪类。无需Javascript。
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句