悬停在div上，显示其他div，但隐藏的div在主容器的外面

Question

我试图在悬停时显示主容器外的div，我发现大多数代码都是关于显示主容器内的div，但我想显示和隐藏主容器外的div

Check Demo HERE

JS

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

这个小提琴是工作的div悬停和显示div里面，但我们怎么能做到这一点，另一个也在主div之外

Answer 1

如果.overlay是唯一具有该类的div，则只需使用:

$('.overlay').fadeIn()

或

$(this).siblings('.overlay')

更新小提琴

Answer 2

那么您可以更改以下代码:

$(this).find(".overlay");

:

$(this).parent(".overlay")

或者如果你唯一有叠加的类，只需使用:

$('.overlay)

Answer 3

只有当你的div是相邻的而不是在里面的时候，你才有可能在CSS中做到这一点:

例子小提琴<标题> css h1> html

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