html - CSS3 和 HTML5 悬停弹出框

Question

大家好，我目前正在尝试开发一个 HTML5 和 CSS3 网站。我想要做的是，当用户将鼠标悬停在网站的输入区域上时，我希望能够在鼠标位置旁边显示一条小弹出消息，以向用户显示信息。

这可能吗，如果不是使用 HTML5 和 CSS3，而是使用其他东西。

Answer 1

这是我用作表单基础的非常简单的解决方案。

<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>

适用通常的免责声明:这是一个基础，如果没有外部库来添加高级选择器，将无法在 IE 中工作，Firefox 3.5 不支持 border-radius，等等。