SCSS子要素のテキストデコレーション

Question

ホバリング中にネストされたテキストの装飾を適用する正しい構文は何ですか？ メインをホバリングしながら、（リンク）に下線要素：

<div class="main-wrapper"> 
 
<img src="/abcd.jpg" /> 
 
<a href="http://www.google.com"> Click me! </a> 
 
</div>

私はテキスト装飾を適用したい：我々はHTML構造を持っているとしましょうたとえば

ラッパー

ありがとう

Answer 1

div:hover a { 
    text-decoration: underline; 
} 

Answer 2

あなたが欲しいSCSS

.main-wrapper:hover a { 
 
    text-decoration: underline; 
 
} 
 

 
.main-wrapper a { 
 
    text-decoration: none; 
 
}

<div class="main-wrapper"> 
 
    <img src="/abcd.jpg" /> 
 
    <a href="http://www.google.com"> Click me! </a> 
 
</div>

の下に言及したCSSを与える

.main-wrapper{ 
     a { 
     text-decoration: none; 
     } 

     &:hover { 
     a { 
      text-decoration: underline; 
     } 
     } 
    }