Html CSS3 和 HTML5 悬停弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5319278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 and HTML5 Hover Popup Box
提问by Boardy
Hi all I am currently trying to develop an HTML5 and CSS3 website. What I want to be able to do is when a user hovers over an input area of the website I want to be able to display a little pop up message next to the mouse position to display information to the user.
大家好我目前正在尝试开发一个 HTML5 和 CSS3 网站。我希望能够做的是当用户将鼠标悬停在网站的输入区域上时，我希望能够在鼠标位置旁边显示一个小弹出消息以向用户显示信息。
Is this possible, if not with HTML5 and CSS3 but using something else.
这是可能的，如果不是使用 HTML5 和 CSS3，而是使用其他东西。
回答by Jeremy Conley
Here is a very simplistic solution I use as a base with my forms.
这是我用作表单基础的非常简单的解决方案。
<style>
.help {
background-color: #FFFF73;
border-radius: 10px;
display: none;
opacity: 0.9;
padding: 10px;
z-index: 100;
}
.help_link:hover + span {
display: inline;
}
</style>
<form>
<label>Input: <input type="text" name="text" /></label> <a href="#" class="help_link">Help</a> <span class="help">Some help here on this input field.</span><br />
<label>Input: <input type="text" name="text2" /></label> <a href="#" class="help_link">Help</a> <span class="help">Some help here on this input field.</span><br />
</form>
The usual disclaimers apply: this is a base, will not work in IE without an external library to add advanced selectors, border-radius not supported in Firefox 3.5, etc.
通常的免责声明适用：这是一个基础，如果没有外部库来添加高级选择器，Firefox 3.5 不支持边框半径等，则无法在 IE 中工作。
回答by Syeda Raza
<input type="text" title="info for user here"/>You can hover over an input text field and the title will allow a tool-tip type message pop up.
您可以将鼠标悬停在输入文本字段上，标题将允许弹出工具提示类型的消息。
