将鼠标悬停在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，但是我们怎么能做div而另一个也在div之外

Answer 1

如果.overlay是该课程的唯一div，您可以使用：

$('.overlay').fadeIn()

或

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

<强> Updated Fiddle

Answer 2

然后你可以改变这段代码：

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

对此：

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

或者，如果您是唯一一个覆盖的类，请使用：

$('.overlay)

Answer 3

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

example fiddle

的CSS

    div.overlay { opacity:0; -webkit-transition:opacity 500ms ease; transition:opacity 500ms ease;}
    div.box:hover ~ div.overlay,
    div.overlay:hover {    opacity:1; height:100%;}

的HTML

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