javascript - Semantic Ui Dropdown on hover - Stack Overflow

admin管理员组

文章数量:1241040

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>

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>

• javascript
• jquery
• semantic-ui

Share Improve this question Follow asked Apr 23, 2014 at 16:22 ryr11ryr11 25444 silver badges1111 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

This is the same answer as above, just cleaner.

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

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

I use this:

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

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

本文标签： javascriptSemantic Ui Dropdown on hoverStack Overflow