Question

我知道这可能有一个简单的解决方案，但我是一个Jquery noob。请帮忙。如何在鼠标悬停时在另一个DIV上显示DIV？

示例，我有：

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

我想在div“box”上“覆盖”另一个div

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

我如何使用JQuery做到这一点？

抱歉，并提前致谢！

Answer 1

如果我理解正确，您只想在将鼠标悬停在overlay上时显示box。

您可以使用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;   
}

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

如果您希望使用animation / jquery来显示/隐藏overlay，可以使用以下内容：

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

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

Answer 2

您可以拥有另一个DIV元素，其中“about”类位于您想要的位置。并将有CSS风格：不透明度：0;

然后在JS中你必须编写一个小脚本，它将位于onload / ready函数中，类似于：

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

如果此元素将覆盖顶部的某些内容，则最好使用CSS属性“display：none”来阻止此透明元素接管鼠标事件。

Answer 3

这是使用本机JavaScript（不需要jQuery库）的方法。如果您未使用ES6，则可以将arrow functions替换为常规旧版function expressions：

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>

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

3 个答案: