javascript 悬停时显示框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16776276/
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
Display box on hover
提问by imre
I'm fairly new to web development and I've been asked to create a box which only displays on hover over an image (static icon) and displays my chunk of code (facebook likebox, dynamic qr code icon etc.). Could you please just help me find the most elegant solution?
我对 Web 开发还很陌生，我被要求创建一个框，该框仅在悬停在图像上时显示（静态图标）并显示我的代码块（facebook likebox、动态 qr 代码图标等）。你能帮我找到最优雅的解决方案吗？
Any help appreciated!
任何帮助表示赞赏！
回答by Praveen Kumar Purushothaman
You can do this via CSS itself. Although there are lot of plugins, lets do something like this. First, you need a hovering element, say in this case, a link.
您可以通过 CSS 本身做到这一点。虽然有很多插件，让我们做这样的事情。首先，您需要一个悬停元素，在本例中是一个链接。
<a href="#">Hover Me!</a>
Next should be the tool tip. We can have a <span>for now and put it inside the link.
接下来应该是工具提示。我们可以暂时拥有一个<span>并将其放入链接中。
<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>
Now comes the real CSS part.
现在是真正的 CSS 部分。
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
This is just one of a pure CSS solution. You can see the working fiddle here.
这只是纯 CSS 解决方案之一。你可以在这里看到工作小提琴。
However, there are a lot of plugins, which keep this concept as base and work for hover-cards and tool tips. Some good examples include:
然而，有很多插件，它们以这个概念为基础，适用于悬停卡和工具提示。一些很好的例子包括：
回答by Rakesh Singh
<img src="image.png" onmouseover='$("#div_content").show();' onmouseout='$("#div_content").hide();' />
<div id="div_content" style='width:100px;height:100px;display:none;'>Test data</div>
You can write any content in between DIV, which will display when you mouser over on image and hide when you mouse out from image
您可以在 DIV 之间写入任何内容，当您将鼠标悬停在图像上时显示，当您将鼠标移出图像时隐藏
