css 鼠标指针悬停在Twitter Bootstrap 下拉导航上

y0u0uwnf  于 2023-04-13  发布在  Bootstrap
关注(0)|答案(4)|浏览(130)

当我将鼠标悬停在导航栏中的下拉列表上时,鼠标会切换到文本指针,而不是显示链接的手形指针。
这是我的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>

有谁知道我该怎么补救吗?

k3bvogb1

k3bvogb11#

我们错过了你的CSS,但我会选择一个简单的cursor: pointer

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

bprjcwpo2#

cursor:pointer的替代方案是为<a>添加惰性href属性,例如href="#"(尽管是some object to this)。

3htmauhk

3htmauhk3#

对于Bootstrap 4:

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

vnzz0bqm4#

Bootstrap 5.x

你可以用button替换<a>元素,它们有指针光标悬停。只要确保添加dropdown-item类。

<button class="dropdown-item" onclick="someFunc()">Do something</button>

相关问题