Javascript 使用“onmouseover”的描述框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3559467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Description Box using "onmouseover"
提问by l--''''''---------''''''''''''
I am playing with the onmouseoverevent in javascript
我onmouseover在 javascript 中玩这个事件
I would like a little box to pop up and remain up until there is no onmouseoveranymore
我想要一个小盒子弹出并保持直到onmouseover不再存在
I think it's called a description box, but I am not sure.
我认为它被称为描述框，但我不确定。
How do I get a little box to pop up with custom text when I put my mouse over certain text, and disappear once I move the mouse to a different object..?
当我将鼠标放在某些文本上时，如何让一个带有自定义文本的小框弹出，并在将鼠标移动到不同的对象时消失..？
回答by casablanca
Assuming popupis the ID of your "description box":
假设popup是您的“描述框”的 ID：
HTML
HTML
<div id="parent"> <!-- This is the main container, to mouse over -->
<div id="popup" style="display: none">description text here</div>
</div>
JavaScript
JavaScript
var e = document.getElementById('parent');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
Alternatively you can get rid of JavaScript entirely and do it just with CSS:
或者，您可以完全摆脱 JavaScript 并仅使用 CSS：
CSS
CSS
#parent #popup {
display: none;
}
#parent:hover #popup {
display: block;
}
回答by Ohmless
Although not necessarily a JavaScript solution, there is also a "title" global tag attribute that may be helpful.
虽然不一定是 JavaScript 解决方案，但还有一个“title”全局标签属性可能会有帮助。
<a href="https://stackoverflow.com/questions/3559467/description-box-on-mouseover" title="This is a title.">Mouseover me</a>
回答by Starx
Well, I made a simple two liner script for this, Its small and does what u want.
好吧，我为此制作了一个简单的两行脚本，它很小并且可以满足您的需求。
Check it http://jsfiddle.net/9RxLM/
检查它 http://jsfiddle.net/9RxLM/
Its a jquery solution :D
它是一个 jquery 解决方案：D
回答by Display Name
This an old question but for people still looking. In JS you can now use the titleproperty.
这是一个古老的问题，但对于仍在寻找的人来说。在 JS 中，您现在可以使用该title属性。
button.title = ("Popup text here");
回答by Trafalmadorian
I'd try doing this with jQuery's .hover()event handler system, it makes it easy to show a div with the tooltip when the mouse is over the text, and hide it once it's gone.
我会尝试使用 jQuery 的.hover()事件处理程序系统执行此操作，当鼠标悬停在文本上时，它可以轻松显示带有工具提示的 div，并在它消失后隐藏它。
Here's a simple example.
这是一个简单的例子。
HTML:
HTML：
?<p id="testText">Some Text</p>
<div id="tooltip">Tooltip Hint Text</div>???????????????????????????????????????????
Basic CSS:
基本CSS：
?#?tooltip {
display:none;
border:1px solid #F00;
width:150px;
}?
jQuery:
jQuery：
$("#testText").hover(
function(e){
$("#tooltip").show();
},
function(e){
$("#tooltip").hide();
});??????????
