2017-02-19 15 views
0

ホバリング中にネストされたテキストの装飾を適用する正しい構文は何ですか? メインをホバリングしながら、(リンク)に下線要素:SCSS子要素のテキストデコレーション

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

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

ラッパー

ありがとう

答えて

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

あなたが欲しい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; 
     } 
     } 
    }