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

Question

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

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

score 8 · Accepted Answer

使用这样的 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 不直接相邻，则需要将替换为+a~以获得相同的效果。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

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

3 回答 3