时间戳

首页 > 解决方案 > 不要在 'a' 元素包裹的 'div' 元素内的文本下划线

html - 不要在 'a' 元素包裹的 'div' 元素内的文本下划线

问题描述

div我有一个以下模板，当链接悬停时，我不想在 a 内加下划线：

<a href="#">
   <div class="card">
      <h2>Title</h2>
   </div>
</a>

我尝试了以下规则，但悬停时文本仍带有下划线：

a:hover .card {
   text-decoration: none;
}

标签： htmlcss

解决方案

由于下划线出现在锚标记上，因此您只需定位该标记：

a:hover {
   text-decoration: none;
}
<a href="#">
   <div class="card">
      <h2>Title</h2>
   </div>
</a>

.card编辑：仅在div 位于 a 标签内时使用下划线：

a,
a:hover .card {
  text-decoration: none;
}

a .card {
  text-decoration: underline;
}
<a href="#">
  <div class="card">
    <h2>Title</h2>
  </div>
</a>

推荐阅读