基于下拉选择的信息框答案

【问题标题】：Information box based on drop down selection基于下拉选择的信息框
【发布时间】：2013-05-15 02:42:42
【问题描述】：

这就是我想要做的事情。我有一个下拉框，我想要一个浮动框来显示基于项目的定义。

例如，列表包含，

项目 1 第 2 项第 3 项第 4 项

用户将鼠标悬停在第 2 项上，将弹出简短说明。

我有办法吗？我不是在寻找整个代码，我只是想指出正确的方向。

谢谢...

【问题讨论】：

希望能帮助您完成任务。 =]
谢谢，我试试看。
是的，如果可行，请将我的答案标记为正确以供将来参考。谢谢。
为了正确的答案而反复向上？

标签： javascript html css

【解决方案1】：

有很多不同的方法可以完成这项任务。

纯CSS

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

div {
    display: none;
}

a:hover + div {
    display: block;
}

还有jquery：

$("#yourElement").attr('title', 'This is the hover-over text');

如果您可能需要大量使用它，jquery 中也有一个插件：

jQuery 工具提示插件。在这里找到

http://jqueryui.com/tooltip/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DPlugins%2FTooltip%26redirect%3Dno

javascript：

<div style="width: 80px; height: 20px; background-color: red;" 
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>


onmouseout="document.getElementById('div1').style.display = 'none';"

另一个 jquery 选项是显示和隐藏：

$("#menu").hover(function(){
    $('.flyout').show();
},function(){
    $('.flyout').hide();
});

jquery mouseover and mouseout:

http://jsfiddle.net/hGTPp/

【讨论】：