使用css隐藏超链接行
Posted
技术标签:
【中文标题】使用css隐藏超链接行【英文标题】：Hide Hyperlink Line using 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)?的可能重复
【参考方案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% 是否有效。以上是关于使用css隐藏超链接行的主要内容，如果未能解决你的问题，请参考以下文章