Menu
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?
600
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
Example ExplainedUse any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.
We're missing your CSS, but I would go for a simple cursor: pointer :
.dropdown-menu li:hover { cursor: pointer; } An alternative to cursor:pointer is adding an inert href attribute for the <a>, e.g. href="#" (although some object to this).
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
