Semantic Ui Dropdown on hover

问题

I want my semantic ui dropdown menu to trigger on hover instead of click, it works on click, but not hover.

Javascript:

$('.ui.dropdown').dropdown({on:'hover'});

HTML:

<div class="ui dropdown item">
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
    <div class="menu">
        <a class="item"><i class="fa fa-users"></i> Players</a>
        <a class="item"><i class="fa fa-user-md"></i> Staff</a>
    </div>
</div>

回答1:

If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div:

<div class="ui simple dropdown item">
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
    <div class="menu">
        <a class="item"><i class="fa fa-users"></i> Players</a>
        <a class="item"><i class="fa fa-user-md"></i> Staff</a>
    </div>
</div>

Fiddle Demo

回答2:

you can take this, it works for me $('.dropdown').dropdown({transition: 'drop' }).dropdown({ on: 'hover' });

回答3:

This is the same answer as above, just cleaner.

$('.dropdown').dropdown({transition: 'drop', on: 'hover' });

回答4:

I use this:

$('.menu > .ui.dropdown').dropdown({
    on: 'hover'
});

And it works well. On your case, try to select the parent of dropdown item.

来源：https://stackoverflow.com/questions/23250093/semantic-ui-dropdown-on-hover