Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Make Dropdown works with Hover #1029

Closed
dbpolito opened this issue Jan 16, 2012 · 3 comments
Closed

[Feature] Make Dropdown works with Hover #1029

dbpolito opened this issue Jan 16, 2012 · 3 comments

Comments

@dbpolito
Copy link

Make a easy way to change Dropdown to work with hover instead of Click. something like $('.dropdown-toggle').dropdown('hover').

I'm using this instead of dropdown.js:

$('.navbar li.dropdown').hover(
    function(){
        $(this).addClass('open').find('ul').stop(true,true).hide().slideDown('fast');
    },
    function(){
        $(this).removeClass('open').find('ul').stop(true,true).slideUp('fast');
    }
);
$('.navbar li.dropdown li').unbind('mouseover').unbind('mouseout');
@i-like-robots
Copy link

You may find jQuerys hover toggle shortcut has a few edge case issues as it uses the mouseenter event which will not be triggered if the mouse enters from outside the document window - such as if the menu is positioned against the top of the browser and the user moves their mouse from the URL bar - nothing will happen. This can be solved by using the mouseover event.

Hover also has the disadvantage of not being accessible on touch screen devices which has quite an inelegant workaround http://jsfiddle.net/i_like_robots/6JbtX/embedded/result/

@mdo
Copy link
Member

mdo commented Jan 16, 2012

We purposely avoid using :hover for menus. Hover should tell users that something is clickable, not trigger an event that the user likely didn't want in the first place. It's the same reason we removed hovercards from Twitter.com many months ago.

@mdo mdo closed this as completed Jan 16, 2012
daveobriencouk pushed a commit to egocreative/bootstrap that referenced this issue Nov 18, 2012
added a try/catch block to make log work with 'use strict'
@istvan-ujjmeszaros
Copy link

There are many CSS and js hacks out there for this functionality, but all of them is breaking something.
I am against using hover, but if someone really needs that, then do it properly. I made a plugin which is using only the Bootstrap javascript API without any hack, so it works on all devices, without braking the usability:
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

@twbs twbs locked and limited conversation to collaborators Jun 27, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants