2 Div 的一个隐藏并出现在第二个悬停时答案

【问题标题】：2 Div's One Hidden and Appear on hover of 2nd2 Div 的一个隐藏并出现在第二个悬停时
【发布时间】：2013-05-27 20:16:37
【问题描述】：

我有 2 个相邻的 div，我们称它们为 div A 和 div B

我想隐藏 div B，当你将鼠标悬停在 div a 上时，div b 出现，然后当你不再悬停它时消失....不知道该放什么。

【问题讨论】：

【解决方案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 变得可见。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

但是如果你想在这个隐藏和显示过程中做更多的事情（例如淡入淡出动画、滑动动画或其他 jQuery 东西），那么这就是它可以用 jQuery 完成的方式：

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

jQuery 的.hover() 有一个变体，它接受两个处理程序——一个用于显示，第二个用于隐藏。

【讨论】：