儿童元素的SCSS文本装饰

Question

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

例如，假设我们有 HTML结构：

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

我希望在悬停主要包装

时应用文本修饰：在（链接）元素上加下划线

谢谢

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

Answer 2

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