gpt4 book ai didi

javascript - 基于下拉选择的信息框

转载 作者:太空宇宙 更新时间:2023-11-04 14:59:04 25 4
gpt4 key购买 nike

这就是我想要做的。我有一个下拉框,我想要一个 float 框来显示基于元素的定义。

例如,列表包含,

元素 1第 2 项第 3 项元素 4

用户将鼠标悬停在元素 2 上,将弹出一个简短的描述。

我有办法做到吗?我不是在寻找完整的代码,我只是想指出正确的方向。

谢谢你...

最佳答案

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

纯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 和 mouseout:

http://jsfiddle.net/hGTPp/

关于javascript - 基于下拉选择的信息框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16651246/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com