鼠标悬停在输入文本框上时显示一些文本

Question

鼠标悬停在输入文本框上时显示一些文本

mou*_*aim 1 html javascript css internet-explorer-8

我有一个输入文本框,当用户的鼠标越过它时,我想在其上显示一些文本区域,向他提供要输入的文本的信息.这是我的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>

Run Code Online (Sandbox Code Playgroud)

什么是最好的CSS技巧有助于做到这一点？提前感谢您的帮助.

Answer 1

Ric*_*AHB 5

你可以用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;
}

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/v8xUL/1/

归档时间：	12 年，1 月前
查看次数：	39365 次
最近记录：	12 年，1 月前