Twitter Bootstrap 下拉导航悬停时的鼠标指针答案

【问题标题】：Mouse pointer on hover of Twitter Bootstrap dropdown navTwitter Bootstrap 下拉导航悬停时的鼠标指针
【发布时间】：2013-10-29 01:26:36
【问题描述】：

当我将鼠标悬停在导航栏中的下拉菜单上时，鼠标会变为文本指针，而不是应为链接显示的手形指针。

这是我的html：

<ul class="nav">
  <li class="active"><%= link_to 'Home', root_path %></li>
  <li><a href="#">Forums</a></li>
  <li class="dropdown">
    <a data-target="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
      World vs. World
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li><%= link_to 'Current Match', current_match_path %></li>
      <li><%= link_to 'All NA Matches', wvw_path %></li>
    </ul>
  </li>
</ul>

有人知道我该如何解决这个问题吗？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

我们缺少您的 CSS，但我会选择简单的 cursor: pointer：

.dropdown-menu li:hover {
    cursor: pointer;
}

【讨论】：

在 bootstrap 4 中，您可以使用：.nav-item a:hover { cursor: pointer }
对于 bootstrap 4，使用a:not([href]).dropdown-toggle:hover { cursor: pointer;} 可能更具体。吹毛求疵，但这允许您为下拉菜单和常规链接使用备用光标。

【解决方案2】：

cursor:pointer 的替代方法是为 <a> 添加惰性 href 属性，例如href="#"（虽然some object to this）。

【讨论】：

如果你想拥有相同的 ui 风格，同时不使用 href 处理任何导航，那么使用 myTitle
只是对其他人的警告，我在页面中间的下拉列表中使用了href="#"，每次单击选项时它都会滚动回页面顶部。有点烦人的行为。
仅供参考：如果您在 onclick 事件中返回 false，它将不会滚动回顶部。 (onclick="return false;")

【解决方案3】：

对于引导程序 4

.dropdown:hover .dropdown-menu {display: block;}

【讨论】：

请通过更多解释改进您的答案。如果您的答案对任何有类似问题的人来说都是清楚的，那就太好了。谢谢！