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

Posted 2023-05-08

【中文标题】2 Div 的一个隐藏并出现在第二个悬停时

【英文标题】：2 Div's One Hidden and Appear on hover of 2nd

【发布时间】：2013-05-27 20:16:37

【问题描述】：

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

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

【问题讨论】：

发布您的 html。如果 B 不是 A 的孩子，您可能无法做到这一点。

【参考方案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

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

【讨论】：

没有比这更好的了！ +1

我现在遇到一个问题，当它出现时，它会将内容推送到它周围。如何定位它，使其显示在 div 旁边，但固定在内容之上，因此它不会移动其他文本/图像或 div？

我不太确定你想做什么，但如果你需要它位于特定位置，你可以使用position:absolute，这不会对周围元素产生任何影响.

【参考方案2】：

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

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

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

【讨论】：

元素不必直接相邻。您可以使用通用兄弟组合器 (~) 来引用更远的元素。

编辑为引用兄弟姐妹。谢谢。

【参考方案3】：

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

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

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

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

JSFiddle Example

【讨论】：

实际上，多亏了转换，这些天你也可以用纯 CSS 来实现大部分类似的事情。它只是不适用于旧版本的 IE。