SCSS：簡單的懸停問題

Question

這看起來相當簡單，但我不確定是什麼錯誤。

我試圖通過將鼠標懸停在div元素，從而來切換visibility屬性：

<div class="tooltip"> 
    <span class="tooltip-text"> 
    Hello world! 
    </span> 
</div> 

與SCSS：

.tooltip{ 
    position: relative; 
    border: 2px solid red; 
    width: 20px; 
    height: 20px; 
    background-color: white; 
    text-align: center; 
    color: #3f51b5; 
    font-size: 16px; 
    font-weight: bold; 
    padding: 4px; 
    .tooltip-text{ 
    visibility: hidden; 
    width: 120px; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    position: absolute; 
    z-index: 1; 
    &:hover { 
     visibility: visible; 
    } 
    } 
} 

我假設嵌套此刻不正確的。

Answer 1

您分配了:hover CSS到.tooltip-text，這是隱藏的，因此您無法將其懸停。您需要將:hover僞類選擇器分配到.tooltip，然後列出.tooltip-text選擇器，然後將其選中。像這樣

.tooltip{ 
 
    position: relative; 
 
    border: 2px solid red; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: white; 
 
    text-align: center; 
 
    color: #3f51b5; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    padding: 4px; 
 
    &:hover .tooltip-text { 
 
    visibility: visible; 
 
    } 
 
    .tooltip-text{ 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    position: absolute; 
 
    z-index: 1; 
 
    } 
 
}