CSS Div链接文本加下划线
我有这样一个简单的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;
}
您需要将文本修饰应用到链接而不是h2或p如下所示：
a{
text-decoration:none;
}
你不能将一个样式text-decoration:none应用于一行内的元素。
如果yu不打算适用于所有链接此规则，则可以为该链接分配一个类，并为此创建类。
示例在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
您可以在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;
}
这里是一个演示
为避免悬停时出现文字下划线，请将此添加到您的CSS中：
a:hover{
text-decoration:none;
}