sassを使用して複数のクラスをネストする

Question

sassを使用して複数のクラスをネストしようとしています。ホバーを使用してボタンを表示したい次のように私のSCSSは次のとおりです。

.item { 
    border-bottom: 1px dotted #ccc; 
    text-indent: 50px; 
    height: 81%; 
    padding: 2px; 
    text-transform: capitalize; 
    color: green; } 

    .item .Button { 
    visibility: hidden; } 

    .item .Button:hover { 
     visibility: visible; } 

ホバープロパティはここで働いていません。

.item{ 
    border-bottom: 1px dotted #ccc; 
    text-indent: 50px; 
    height: 81%; 
    padding: 2px; 
    text-transform: capitalize; 
    color: green; 

    .Button{ 
     visibility: hidden; 

     &:hover{ 
      visibility: visible; 
     } 
    } 
} 

これは、次のようにCSSで示されています。

Answer 1

ボタンは既に隠されているので、私はその項目にvisibleプロパティを置きます：代わりにホバー。

SCSSがどのように見えるべきか：

.item { 
    border-bottom: 1px dotted #ccc; 
    text-indent: 50px; 
    height: 81%; 
    padding: 2px; 
    text-transform: capitalize; 
    color: green; 

    .Button { 
    visibility: hidden; 
    } 

    &:hover .Button { 
    visibility: visible; 
    } 
} 

.item { 
 
    border-bottom: 1px dotted #ccc; 
 
    text-indent: 50px; 
 
    height: 81%; 
 
    padding: 2px; 
 
    text-transform: capitalize; 
 
    color: green; 
 
} 
 

 
.item .Button { 
 
    visibility: hidden; 
 
} 
 

 
.item:hover .Button { 
 
    visibility: visible; 
 
}

<div class="item"> 
 
    Hover Item Class 
 
    <button class="Button">button shows</button> 
 
</div>

Answer 2

はこれを試してみてください。

.item{ 
    border-bottom: 1px dotted #ccc; 
    text-indent: 50px; 
    height: 81%; 
    padding: 2px; 
    text-transform: capitalize; 
    color: green; 

    &:hover { 
    .btn { 
     visibility: visible; 
    } 
    } 
    .btn{ 
    visibility: hidden; 
    } 
}