JQuery 在鼠标悬停时在另一个 DIV 上显示 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10087642/
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
JQuery show DIV on another DIV on mouseover
提问by DavidF
I know this may have a simple solution but I'm a Jquery noob. Please, help. How can I show a DIV on another DIV on mouseover?
我知道这可能有一个简单的解决方案，但我是 Jquery 菜鸟。请帮忙。如何在鼠标悬停时在另一个 DIV 上显示 DIV？
Example, I have this:
例如，我有这个：
<div class="box"> Info about a game </div>
I want to "overlay" another div on the div "box"
我想在 div“框”上“叠加”另一个 div
<div class="overlay"> Play </div>
How can I do that with JQuery?
我怎样才能用 JQuery 做到这一点？
Sorry and thanks in advance!
抱歉并提前致谢！
回答by Curt
If I understand you correctly, you want to only display overlaywhen hovering over box.
如果我理解正确，您只想overlay在将鼠标悬停在box.
You could use CSS psuedo :hover:
你可以使用 CSS psuedo :hover：
<div class="box">
Info about a game
<div class="overlay"> Play </div>
</div>?
div.box div.overlay
{
display:none;
}
?div.box:hover div.overlay
{
display:block;
}?
http://jsfiddle.net/Curt/BC4eY/
http://jsfiddle.net/Curt/BC4eY/
If you would prefer to use animation/jquery to show/hide the overlayyou can use the following:
如果您更喜欢使用动画/jquery 来显示/隐藏overlay您可以使用以下内容：
$(function(){
$(".box").hover(function(){
$(this).find(".overlay").fadeIn();
}
,function(){
$(this).find(".overlay").fadeOut();
}
);
});?
回答by moka
You can have another DIV element with class 'about' that will be located where you want. And will have CSS style: opacity:0;
您可以拥有另一个类“about”的 DIV 元素，该元素将位于您想要的位置。并将具有 CSS 样式：opacity:0;
Then in JS you have to write little script, that will be located in onload / ready function, something like that:
然后在 JS 中，您必须编写小脚本，该脚本将位于 onload/ready 函数中，如下所示：
$(document).ready(function() {
$('div.box').hover(function() {
$(this).children('.overlay').fadeIn();
}, function() {
$(this).children('.overlay').fadeOut();
});
});
If this element will be overlaying something on top, then it is better to use CSS attribute 'display:none' to prevent this transparent element taking over mouse events.
如果此元素将在顶部覆盖某些内容，则最好使用 CSS 属性“display:none”来防止此透明元素接管鼠标事件。
回答by Tom O.
Here's a way to do it with native JavaScript (no jQuery library needed). If you're not using ES6you can replace the arrow functionswith regular old function expressions:
这是一种使用原生 JavaScript 实现的方法（不需要 jQuery 库）。如果您不使用ES6，您可以用常规的旧函数表达式替换箭头函数：
var box = document.getElementById("box");
var overlay = document.getElementById("overlay");
var init = () => {
overlay.style.display = 'none'; //hide by default when page is shown
box.addEventListener('mouseover', () => {
overlay.style.display = 'inline';
});
box.addEventListener('mouseout', () => {
overlay.style.display = 'none';
});
};
init();<div id="box"> Info about a game<br />
<div id="overlay">Play</div>
</div>