[英]CSS Div link text underline hover
I have a simple div like this... 我有一个像这样的简单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>
...which allows me to change background color on div hover. ...允许我在div悬停时更改背景颜色。 Works great, but as a result, I get the text inside the link showing an underline on hover.
工作得很好,但结果,我得到链接中显示悬停下划线的文本。 I have tried several ways to target the h2 and p, but still can't get rid of the text-decoration on hover.
我已经尝试了几种方法来定位h2和p,但仍然无法摆脱悬停时的文本修饰。
Any ideas on what html element i need to target to apply text-decoration: none ? 关于我需要使用什么html元素来应用text-decoration的任何想法:none?
CSS here... 这里的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;
}
you need to apply text-decoration to the link not to h2
or p
like this: 你需要将文本修饰应用于链接而不是像
h2
或p
这样:
a{
text-decoration:none;
}
you can't apply a style text-decoration:none
to element inside a line. 你不能将一个样式
text-decoration:none
应用于一行内的元素。
You can assign a class to the link if yu don't wamt to apply to all link this rule, classes are made for this. 您可以为链接分配一个类,如果您不想将所有链接应用于此规则,则为此创建类。
Example insert a class inside css 示例在css中插入一个类
.not-underline{
text-decoration:none;
}
update your html adding a class to your link 更新您的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>
You can add a parent selector name before anchor tag in CSS. 您可以在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: CSS:
.display a{
text-decoration:none !important;
}
And to avoid text underlining on hover, add this to your css: 要避免悬停时出现文本下划线,请将其添加到您的css:
a:hover{
text-decoration:none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.