3

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

例如，我有这个：

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

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

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

我怎么能用 JQuery 做到这一点？

抱歉，提前谢谢！

4

3 回答 3

33

如果我理解正确，您只想overlay在悬停时显示box.

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

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

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

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

于 2012-04-10T11:16:33.813 回答
3

您可以拥有另一个带有“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”来防止这个透明元素接管鼠标事件。

于 2012-04-10T11:19:14.490 回答
0

这是一种使用原生 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>

于 2017-10-23T18:01:40.137 回答