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应用于行中的元素。
您可以将类分配给链接，如果您不wamt应用于所有链接，则为此进行了类。

示例在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

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;
}

这是一个演示

Answer 3

，为避免在悬停的文本下划线，请将其添加到您的CSS：

a:hover{
  text-decoration:none;
  }