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>

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

Answer 2

<input type="text" title="info for user here"/>

您可以将鼠标悬停在输入文本字段上，标题将允许弹出工具提示类型的消息。

CSS3和HTML5悬停弹出框

2 个答案: