Css悬停div显示另一个div

Question

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

我会报告代码

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

但是这条指令（右侧隐藏了display：none;）似乎无法正常工作。

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

Answer 1

您可以使用相邻的选择器+来执行此操作。请查看以下示例

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships

.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>

Answer 2

试试这个

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