使用css隐藏超链接行答案

【问题标题】：Hide Hyperlink Line using css使用css隐藏超链接行
【发布时间】：2013-04-16 09:05:33
【问题描述】：

我有这个 HTML 代码

<a href="test.html">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>

这是css

.menubox {
    height: 150px;
    width: 100%;
    font-size: 14px;
    color: #777;
    margin: 0 0 0 0;
    padding: 0; 
    -moz-border-radius: 10px;
    border-radius: 10px; 
    position: relative;}

.mcolor1 { background: #3A89BF url(../images/prod2.png) no-repeat center center; }

鼠标悬停在这个div上，文字显示超链接线，如何隐藏？

【问题讨论】：

a { text-decoration: none; }
How to remove the underline for anchors(links)?的可能重复

标签： css hyperlink hover text-styling

【解决方案1】：

正如其他人所建议的，从链接中删除下划线很容易。但是，如果您只需要针对此特定链接，请尝试给它一个类。示例：

.no-underline:hover {
    text-decoration: none;
}

<a href="test.html" class="no-underline">
  <div class=" menubox mcolor1">
    <h3>go to test page</h3>
  </div>
</a>

【讨论】：

现在测试一下..谢谢
像魔术一样工作 :) 谢谢大家
仍然需要 15 声望点 :( ...这是我在这里的第一个 Q :) ..一旦我获得一些，我会这样做。谢谢尼克斯，谢谢大家。
您也可以将menubox 和mcolor1 类移动到<a>，并将display:block; 和text-decoration:none 添加到.menubox 样式块。这会使 HTML 更短
@Robinlolo: 啊：你可能需要.menubox:hover { text-decoration:none; }，而不是在.menubox 样式块中添加text-decoration:none。

【解决方案2】：

如果您想在悬停时删除下划线，请使用以下 CSS：

a:hover {
   text-decoration: none;
}

注意：

除非您的页面使用 HTML5 文档类型 (<!doctype html>)，否则您的 HTML 结构无效。 Div 不能嵌套在 HMTL5 之前的 a 元素中。

【讨论】：

感谢您的回复，但我可以在完整的 div 上应用 href
@Morpheus：他们可以在当前版本的 HTML (HTML5) 中。试试看：validator.w3.org
实际上，在 HTML5 中，您可以在链接中嵌套块元素。如果它是 HTML5 以外的任何东西，例如 XHTML 或其他任何东西，那么它将是无效的，是的。 html5doctor.com/block-level-links-in-html-5

【解决方案3】：

就目前的 HTML 而言，您无法隐藏链接下划线只是为此链接。

以下 CSS 将删除所有链接的下划线：

a:hover {
    text-decoration: none;
}

要仅为此链接删除它，您可以将链接移动到<div>：

.menubox > a {
    display: block;
    height: 100%;
}

.menubox > a:hover {
    text-decoration: none;
}

<div class="menubox mcolor1">
    <a href="test.html">
        <h3>go to test page</h3>
    </a>
</div>

【讨论】：

我会试试这个，然后告诉你。谢谢
我还是想用我的html结构
转到测试页面

在这种情况下我可以将 Div 视为 Button
您假设 OP 可以控制 HTML。在这种情况下，最好不要改变结构，而是给<a> 一个类，它可能是有针对性的。
@Robinlolo：明白了。我认为保留原始 HTML 是更好的主意——我不确定我的 CSS 中的 height:100% 是否有效。

注意：

转到测试页面