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