Question

我有这样的结构：

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

我想在：悬停上仅在innerdiv-without-underline下添加文本不会下划线。

我没有运气尝试过这个

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

我该怎么办？

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>

Answer 2

只需从innerdiv CSS中删除.link .innerdiv，因为achor标签已分配了文本修饰css属性，而不是DIV

.link  {
  text-decoration:none;
}

Answer 3

您的CSS规则是这样的：

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

首先，没有名为innerdiv的类。您可能是说innerdiv-without-underline。因此，可能您应该使用了此

：

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

A，这也不行。由于下划线来自<a>标签而不是<div>标签的修饰。因此，仅为div指定规则将不起作用。您可以做的是：

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

这将从所有链接中删除下划线。但是现在您希望其中一个在悬停上加下划线，而另一个则不要。

.link {
  text-decoration: none;
}

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

删除链接内div的下划线

3 个答案: