4

我有这个 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 上，文本显示超链接行，我该如何隐藏它？

4

3 回答 3

8

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

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

于 2013-04-23T08:45:26.887 回答
2

如果要删除悬停时的下划线，请使用以下 CSS：

a:hover {
   text-decoration: none;
}

笔记 ：

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

于 2013-04-23T08:27:03.690 回答
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>

于 2013-04-23T08:27:32.190 回答