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>

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