使用CSS隐藏超链接下划线

Question

使用CSS隐藏超链接下划线

4

I have this HTML Code

<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上时，文本会显示超链接线，我该如何隐藏它？

- Robinlolo

6

文本装饰：无。 - Henrik Andersson

可能是如何去除锚点（链接）下划线的重复问题？ - Antony

@Antony：我认为这个问题比重复的问题更加复杂，因为涉及到HTML。 - Paul D. Waite

3个回答

2

如果你想在鼠标悬停时去掉下划线，可以使用以下CSS代码：

a:hover {
   text-decoration: none;
}

注意：

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

- Morpheus

谢谢你的回复，但是我可以在整个div上应用href。 - Robinlolo

@Morpheus：它们可以在HTML的当前版本（HTML5）中使用。试试这个链接：http://validator.w3.org/ - Paul D. Waite

1

实际上，在HTML5中，您可以将块元素嵌套在链接内部。如果使用的是除HTML5之外的任何其他语言，例如XHTML或其他，则将无效。http://html5doctor.com/block-level-links-in-html-5/ - Nix

1

使用现有的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>

- Paul D. Waite

我会尝试这个，然后告诉你。谢谢。 - Robinlolo

我仍然想使用我的HTML结构。 - Robinlolo

<a href="test.html"> <div class="menubox mcolor1"> <h3>前往测试页面</h3> </div> </a> 在这种情况下，我可以将Div视为按钮。 - Robinlolo

你假设 OP 对 HTML 有控制权。在这种情况下，最好不要改变结构，而是给 <a> 添加一个类，可以进行定位。 - Nix

@Robinlolo：明白了。我认为保留原始的HTML是更好的想法——我不确定我的CSS中的height:100%会起作用。 - Paul D. Waite

@Nix：我确实假设了这一点，但是如果他/她无法控制HTML，那么他/她也无法给链接添加类。 - Paul D. Waite

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nix · Accepted Answer

正如其他人建议的那样，去掉链接下划线很容易。但是，如果您需要针对特定的链接进行操作，请尝试为其添加一个类。示例：

.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>