2 Div's One隐藏并出现在第2位

Question

我有2个div彼此相邻，我们称之为div A和​​div B

我希望Div B隐藏，当你将鼠标悬停在div a上时，div b会出现，然后当你不再悬停盘旋时它会消失....不知道要放什么。

Answer 1

使用这样的HTML：

<div class="a">
   This is div a.
</div>
<div class="b">
   This is div b.
</div>

您可以使用这样的CSS：

.b {
  display:none;
}
.a:hover + .b {
  display:block;
}

因此B div开始隐藏display:none，但当您将鼠标悬停在A div上时，display:block会显示它。

Fiddle example

注意：如果div在DOM中彼此不直接相邻，则需要将+替换为~以获得相同的效果。

Answer 2

如果元素不是兄弟（或父子），则不能使用纯CSS。由于你包含了一个jQuery（ish）标记，你可以这样做：

$('#a').on('mouseover', function() { $('#b').show(); });
$('#a').on('mouseout', function() { $('#b').hide(); });

有关工作示例，请参阅http://codepen.io/paulroub/pen/gHetq。

Answer 3

你可以单独使用CSS，正如另一个答案所暗示的那样。

但是如果你想在隐藏和显示过程中做更多的事情（例如褪色动画，滑动动画或其他jQuery的东西），那么这就是用jQuery完成的方法：

$('#a').hover( 
    function() { $('#b').fadeIn() },
    function() { $('#b').fadeOut() }    
);

jQuery的.hover()有一个变种，它接受两个处理程序 - 一个用于show，第二个用于hide。

JSFiddle Example