CSS Div 链接文本下划线悬停

Posted 2023-05-08

【中文标题】CSS Div 链接文本下划线悬停

【英文标题】：CSS Div link text underline hover

【发布时间】：2014-02-11 16:17:00

【问题描述】：

我有一个像这样的简单 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;

【问题讨论】：

展示你现有的 CSS 会很有帮助

【参考方案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

【讨论】：

我明白 - 但这适用于网站上的所有链接。我只想定位此框中的链接。 h2 和 P。

对链接应用一个类并在css中使用类选择器是一个很好的方式来设置你的链接而不是所有链接@lowercase

我明白，但任何直接针对这些目标的尝试都会失败。我做错了什么。

不，你不能在没有文本装饰的情况下设置 h2 和 p 的样式，因为它位于链接 @lowercase

好的。所以我希望我网站上的每个链接都带有下划线，除了上面示例中的 h2 和 p。我如何只针对 CSS 中的那些。我希望这更有意义。

【参考方案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;

这是demo

【参考方案3】：

为了避免在鼠标悬停时加下划线，请将其添加到您的 css 中：

a:hover
  text-decoration:none;