儿童元素的SCSS文本装饰

时间:2017-02-19 14:11:49

标签: css sass

在悬停时应用嵌套文本修饰的正确语法是什么。

例如,假设我们有 HTML结构

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

我希望在悬停主要包装

时应用文本修饰:在(链接)元素上加下划线

谢谢

2 个答案:

答案 0 :(得分:1)

你想要scss

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

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

给出了下面提到的CSS

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

答案 1 :(得分:0)

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