Css hover div显示另一个div

Question

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

我会报告代码

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

但该指令（右div的它是隐藏与显示：无;）似乎没有工作。

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