SCSS：単純なホバリングの問題

Question

これはかなり単純なようですが、何が間違っているのかよくわかりません。

私はそうとdiv要素を置くとvisibility属性を切り替えるしようとしています：SCSSと

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

を：

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