html - 删除链接内 div 的下划线

Question

我有这个结构：

<a href="" class="link">
 <div>
   <div class="innerdiv-with-underline">text with underline</div>
   <div class="innerdiv-without-underline">text</div>
 </div>
</a>

我希望在:hover上只有 innerdiv-without-underline 内的文本不会被加下划线。

我试过这个没有运气：

.link .innerdiv {
    text-decoration:none !important;
}

我能做些什么 ？

标签： htmlcss

Answer 1

您可能希望text-decoration在类中使用属​​性.link而不是类.innerdiv

.link {
  text-decoration: none;
}

.link:hover .innerdiv-with-underline {
  text-decoration: underline;
}

<a href="" class="link">
 <div>
   <div class="innerdiv-with-underline">text with underline</div>
   <div class="innerdiv-without-underline">text</div>
 </div>
</a>