gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:20:52 26 4
gpt4 key购买 nike

我有一个输入文本框,当用户的鼠标经过它时,我想在上面显示一些文本区域,向他提供有关要输入的文本的信息。这是我的 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 三 Angular 形,但您主要寻找的是使用 :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;
}

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

关于javascript - 当鼠标悬停在输入文本框上时显示一些文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21181621/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com