JQuery鼠标悬停显示一个DIV在另一个DIV上

Question

我知道这可能有一个简单的解决方案，但我是Jquery新手。请帮忙。 如何在mouseover时将一个DIV显示在另一个DIV上？ 例如，我有以下内容：

<div class="box"> Info about a game </div>

我想在 "box" div 上 "覆盖" 另一个 div。

<div class="overlay"> Play </div>

如何使用JQuery实现这个功能？

提前致歉并感谢您的帮助！

- DavidF

Answer 1

如果我理解正确，您希望仅在悬停在box上时显示overlay。

您可以使用CSS伪类: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;   
}​

如果你更喜欢使用animation/jquery来显示/隐藏overlay，可以使用以下代码：

http://jsfiddle.net/Curt/BC4eY/

$(function(){
    $(".box").hover(function(){
      $(this).find(".overlay").fadeIn();
    }
                    ,function(){
                        $(this).find(".overlay").fadeOut();
                    }
                   );        
});​

http://jsfiddle.net/Curt/BC4eY/2/

- Curtis

---

是的，你说得对。但这是否兼容所有浏览器？ - DavidF

@Splugged 它与大多数浏览器兼容 http://www.quirksmode.org/css/contents.html - Curtis

@Splugged 请看我的编辑。我也提供了一个动画的jquery版本。 - Curtis

太好了！ 这就是我在寻找的！ 非常感谢你！ - DavidF

Answer 2

你可以在想要的位置拥有一个另外的带有类名“about”的DIV元素。它将具有CSS样式：opacity:0; 然后，在JS中，你需要写一小段脚本，它将位于onload / ready函数中，类似于这样：

$(document).ready(function() {
  $('div.box').hover(function() {
    $(this).children('.overlay').fadeIn();
  }, function() {
    $(this).children('.overlay').fadeOut();
  });
});

如果这个元素将要覆盖在其他元素之上，那么最好使用CSS属性"display:none"来防止这个透明元素接管鼠标事件。

- moka

---

如果页面上有多个“box”，这种方法就行不通了。请改用“$(this)”代替。请参见我的答案https://dev59.com/52LVa4cB1Zd3GeqPxIQS#10087695。 - Curtis

这不是精确的代码，只是为了举例说明如何制作它。如果用户需要显示/隐藏多个DIV元素，则保持原样，如果他需要更具体的内容，可以按照您的方式或更具体地使用jQuery选择器选择对象，例如使用ID而不是CLASS。 - moka

Answer 3

这里有一种使用本地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>

- Tom O.