Css 悬停 div 显示另一个 div

Question

我在 css 悬停效果方面遇到了一些麻烦。我在 2 div.In 左侧有外部容器 div 我需要显示右侧 div（以前隐藏）的悬停效果。

我来报代码

<div class="block-attr">
<div class="left"></div>
<div class="right">Hidden text  </div>
</div>

但是这条指令（对 div 它被隐藏在 display:none; 中）似乎不起作用。

.block-attr .left:hover .right{display:block;}

Answer 1

试试这个

.left:hover + .right{ display: block;}

Answer 2

您可以使用相邻的选择器 + 来做到这一点。检查下面的例子

.right {
  display: none;
}
.block-attr .left:hover + .right {
  display: block;
}

<div class="block-attr">
  <div class="left">Hover here</div>
  <div class="right">Hidden text</div>
</div>

Css hover div to show another div