CSS Div 链接文本下划线悬停

Question

我有一个简单的div，如下所示...

<a href="#">
  <div class="promo-box promo-1">
    <div class="promo-content">
     <h2>Heading here</h2>
     <p>Text content here.</p>
    </div>
  </div>
</a>

......这使我可以改变鼠标悬停在div上时的背景颜色。效果很好，但是结果是链接内的文本在悬停时显示了下划线。我已经尝试了几种方法来定位h2和p，但仍然无法消除悬停时的文本装饰。

有什么想法可以应用text-decoration：none的html元素吗？

CSS如下...

.promo-box
{
text-align:center;
border-radius:5px;
padding:10px;
margin-bottom:20px;
min-height:240px;
}
h2
{
font-family:Lato, Arial, Helvetica, sans-serif;
font-weight:700;
color:#FFF;
font-size:20px;
text-decoration: none;
}
.promo-box p
{
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-weight:400;
color:#FFF;
font-size:16px;
line-height:16px;
}
.promo-1
{
background-color:#125595;
}
div.promo-1:hover;
}

- lowercase

---

展示您现有的 CSS 将会很有帮助。 - Diodeus - James MacFarlane

Answer 1

您需要将文本修饰应用于链接，而不是像这样应用于h2或p：

a{
    text-decoration:none;
}

如果您想将样式text-decoration:none应用于行内元素，是不可能的。如果您不想将此规则应用于所有链接，则可以为链接分配一个类，这就是类的作用。

例如：在CSS中插入一个类

.not-underline{
        text-decoration:none;
    }

更新您的HTML，在链接中添加一个类。

 <a href="#" class="not-underline>
  <div class="promo-box promo-1">
    <div class="promo-content">
     <h2>Heading here</h2>
     <p>Text content here.</p>
    </div>
  </div>
</a>

演示

- Alessandro Minoccheri

---

我理解这一点 - 但这适用于站点上的所有链接。我只想针对此框中的链接进行目标设置。即h2和P。 - lowercase

将一个类应用于链接并在CSS内使用类选择器是样式化链接的好方法，而不是所有链接都要这样做。@lowercase - Alessandro Minoccheri

我明白，但任何直接针对它们的尝试都失败了。我做错了什么。 - lowercase

好的。所以我希望网站上的每个链接都有下划线，除了上面示例中的h2和p。如何在CSS中只针对这些内容进行定位？希望这样更清楚明白。 - lowercase

谢谢，那样做起作用了 - 给'a'链接一个独立的class以便于针对性操作。 - lowercase

Answer 2

在CSS中，您可以在锚点标签之前添加父选择器名称。

<div class='display'>
  <a href="#">
    <div class="promo-box promo-1">
      <div class="promo-content">
        <h2>Heading here</h2>
        <p>Text content here.</p>
      </div>
    </div>
 </a>
</div>

CSS：

.display a{
    text-decoration:none !important;
}

这里有一个演示

- Sagar Awasthi

Answer 3

为了避免在悬停时出现文本下划线，请将以下内容添加到您的CSS中：

a:hover{
  text-decoration:none;
  }

- Faysal Ahmed