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

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

例子，我有这样的：

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

我要 “覆盖” 在格 “盒子”

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

我如何能做到这一点与jQuery另一个DIV？

对不起，提前谢谢！

来源

2012-04-10 DavidF

如果我理解正确，则只需在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; 
}

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-10 11:16:33 Curt

是的，你是正确的。但与所有浏览器兼容吗？ – DavidF 2012-04-10 11:19:39

@Splugged它与大多数浏览器兼容http://www.quirksmode.org/css/contents.html – Curt 2012-04-10 11:28:19

@Splugged查看我的编辑。我也提供了一个动画jQuery版本。 – Curt 2012-04-10 11:31:07

您可以使用另一个DIV元素，其类别为'about'，它将位于您想要的位置。并将有CSS样式：不透明度：0;

在JS

然后，你必须写小剧本，将在onload事件位于/就绪功能，类似的东西：

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

如果该元素将在顶部覆盖的东西，那么最好是使用CSS属性'display：none'来防止这个透明元素接管鼠标事件。

来源

2012-04-10 11:19:14 moka

如果页面上有多个“box”，这将不起作用。改用'$（this）'。看到我的答案http://stackoverflow.com/a/10087695/370103 – Curt 2012-04-10 11:31:56

这不是确切的代码，只是例如如何做到这一点。如果用户需要显示/隐藏多个DIV元素，那么他保持这种方式，如果他需要更具体的，他可以走你的路或更具体的使用jQuery选择器选择对象，例如使用ID而不是CLASS。 – moka 2012-04-10 11:41:49

以下是使用原生JavaScript（不需要jQuery库）的方法。如果你不使用ES6你可以用普通的旧function expressions更换arrow functions：

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-23 18:01:40 tommyO

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

回答

相关问题