Mouse pointer on hover of Twitter Bootstrap dropdown nav

Question

When I hover over the dropdown in my navbar, the mouse changes to the text pointer instead of the hand pointer that should show for a link.

Here's my 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>

Anybody know how I can fix this?

score 44 · Accepted Answer · answered Oct 20 '13 at 16:02

44

We're missing your CSS, but I would go for a simple cursor: pointer :

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

answered Oct 20 '13 at 16:02

zessx

68,042
28
135
158

In bootstrap 4, you can use: `.nav-item a:hover { cursor: pointer }` – Timothy Kanski Feb 04 '18 at 17:41
For bootstrap 4, it may be more specific to use `a:not([href]).dropdown-toggle:hover { cursor: pointer;}`. Nitpicky, but this allows you to use an alternate cursor for dropdowns vs regular links. – sdmeyers Feb 23 '18 at 17:43

score 21 · Answer 2 · edited May 23 '17 at 12:34

21

An alternative to cursor:pointer is adding an inert href attribute for the <a>, e.g. href="#" (although some object to this).

edited May 23 '17 at 12:34

Community

1
1

answered Apr 03 '14 at 12:14

waldyrious

3,683
4
33
41

if you want to have the same ui style while at the same time handling any navigation without the use of href then use myTitle – JoachimR Jan 19 '15 at 16:34
6

Just a warning to others, I used the `href="#"` on a dropdown at the middle of a page and it would scroll back to the top of the page every time I clicked an option. Kind of annoying behavior. – tsleyson Dec 12 '16 at 19:44
1

FYI: If you return `false` in the `onclick` event it will not scroll back to the top. ( `onclick="return false;"`) – James Wilkins Mar 12 '19 at 06:57

score 1 · Answer 3 · edited Apr 12 '23 at 07:54

1

For Bootstrap 4:

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

edited Apr 12 '23 at 07:54

zessx

68,042
28
135
158

answered Mar 17 '19 at 19:10

Kaushik

11
1

1

Please, improve your answer with more explanation. It will be great if your answer will be clear for anyone with alike problem. Thank you! – vezunchik Mar 17 '19 at 19:15

score 0 · Answer 4 · answered Jul 15 '22 at 18:00

0

Bootstrap 5.x

You can replace <a> element with button, they have pointer cursor on hover. Just make sure to add dropdown-item class.

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

answered Jul 15 '22 at 18:00

Eugene

177
2
5

Mouse pointer on hover of Twitter Bootstrap dropdown nav

4 Answers4

Bootstrap 5.x