html – 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悬停时更改背景颜色. 工作得 我有一个像这样的简单div …

<a href="#">  <div >    <div >     <h2>heading here</h2>     <p>Text content here.</p>    </div>  </div></a>

…允许我在div悬停时更改背景颜色.
工作得很好,但结果,我得到链接中显示悬停下划线的文本.
我已经尝试了几种方法来定位h2和p,但仍然无法摆脱悬停时的文本修饰.

关于我需要使用什么HTML元素来应用text-decoration的任何想法：none？

这里的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',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应用于一行内的元素.
您可以为链接分配一个类,如果您不想将所有链接应用于此规则,则为此创建类.

例
在CSS中插入一个类

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

更新您的HTML,为您的链接添加一个类

<a href="#" promo-Box promo-1">    <div >     <h2>heading here</h2>     <p>Text content here.</p>    </div>  </div></a>

DEMO

总结

以上是内存溢出为你收集整理的html – CSS Div链接文本下划线悬停全部内容，希望文章能够帮你解决html – CSS Div链接文本下划线悬停所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。