css - 用户菜单 - 两个问题答案

【问题标题】：css - user menu - two issuescss - 用户菜单 - 两个问题
【发布时间】：2010-11-01 07:46:31
【问题描述】：

当我将鼠标悬停在它上面时，光标不会变为手形，直到您实际悬停在文本上。（例如，如果你关注 SO 导航，你的光标一触到灰色区域就会变成手形。我说的是 Questions、Tags、Users、Badges、Unanswered navigation）

当我点击它时，它会与链接文本相邻。默认情况下，它就像是虚线边框或其他东西。我该如何摆脱它？

【问题讨论】：

标签： css

【解决方案1】：

有两种方法可以获得整个区域的手形光标；要么使链接占据整个区域（也许通过成为整个区域），或者将样式cursor:pointer; 添加到该区域。（让链接覆盖整个区域通常是更好的选择，因为这也使整个区域都可点击。）

在点击链接时去掉虚线边框：

a:active {
    outline: none;
}

【讨论】：

【解决方案2】：

对于SO导航，它是通过以下方式完成的：

<li class="nav">
    <a href="...">Questions</a>
</li>

.nav a {
    padding: 6px 12px;
}

您看到的灰色区域实际上是链接本身（通过设置填充来实现）。要摆脱边界，您应该通过 a:link: 指定：

.nav a:active { outline: none; }

【讨论】：

【解决方案3】：

对于 (1)，在整个 <div> 周围使用 <a>，而不仅仅是文本，这将使输入 div 时光标变为手形光标。另一种方法是将<a>更改为具有类似于

的样式

a { display: block; width: 300px; height: 100px; background: orange }

背景只是为了在这里尝试。可以删除。

对于 (2)，使用

a { outline: none }

【讨论】：

【解决方案4】：

尝试在您的 CSS 中使用以下内容。

a:focus {outline: none;}

但是，我相信旧版本的 IE 不会支持此代码。

【讨论】：