CSS 使用css隐藏超链接行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16164456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide Hyperlink Line using css
提问by Robinlolo
I have this HTML Code
我有这个 HTML 代码
<a href="test.html">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
and this is the css
这是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; }
on mouse hover this div, the text shows the hyperlink line, how can I hide it?
在鼠标悬停此 div 时，文本显示超链接行，我该如何隐藏它？
回答by Nix
As others have suggested, it's easy to remove the underline from links. However, if you need to target just this specific link, try giving it a class. Example:
正如其他人所建议的那样，从链接中删除下划线很容易。但是，如果您只需要针对此特定链接，请尝试为其指定一个类。例子：
.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>回答by Morpheus
If you want to remove the underline on hover, use this CSS:
如果要在悬停时删除下划线，请使用以下 CSS：
a:hover {
text-decoration: none;
}
Note :
笔记 ：
Unless your page uses the HTML5 doctype (<!doctype html>), your HTML structure is invalid. Divs can't be nested inside aelement before HMTL5.
除非您的页面使用 HTML5 文档类型 ( <!doctype html>)，否则您的 HTML 结构是无效的。a在 HMTL5 之前，Div不能嵌套在元素内。
回答by Paul D. Waite
With the HTML as it stands, you can't hide the link underline justfor this link.
就目前的 HTML 而言，您不能仅为此链接隐藏链接下划线。
The following CSS will remove the underline for all links:
以下 CSS 将删除所有链接的下划线：
a:hover {
text-decoration: none;
}
To remove it for just this link, you could move the link inside the <div>:
要仅针对此链接删除它，您可以将链接移动到<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>