html - 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，但仍然无法摆脱悬停时的文本装饰。

关于我需要定位到哪个 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;
}

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>

DEMO