如何让 div 在悬停时消失，而另一个出现？

Question

我想要 2 个不透明的 div。一个是存在的，一个是存在的，当一个。悬停。 -> 由于不透明，当第二个 div 出现时，第一个 div 需要消失以使其不可见。

我试过这样做：

<div id="box">
    <a href="#" class="infobox">Hover me<div class="HideNseek">This is hidden.</div></a>
</div>

#box {
    background-color: rgba(0,0,0,0.6);
    height: 480px;
    width: 600px;
    padding: 15px;
    float: left;
    margin-left: 200px;
    margin-top: 120px;
}
a.infobox {
    position: relative;
    text-decoration: none;
}
a.infobox div.HideNseek {
    display: none;
    z-index: 100;
}
a.infobox:hover div.HideNseek {
    display: block;
    background-color: rgba(0,0,0,0.6);
    height: 480px;
    width: 600px;
    padding: 15px;
    float: left;
    margin-left: -15px;
    margin-top: -34px;
}

如何让第一个div消失？

Answer 1

使用 jQuery -

$('.infobox').hover(function(){
   $(this).parent('div').hide();
});

让它重新出现：

$('.infobox').hover(function(){
   $(this).parent('div').hide();
},function(){
   $(this.parent('div').show())
});