javascript - クリックではなくホバーでJSメニューを表示する

Question

ここからドロップダウンメニュー3を入手しました：http：//tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

onclickでうまく機能しますが、ホバーで機能させる方法がわかりません。

JSでの私の試み：

<script type="text/javascript">

        function DropDown(el) {
            this.dd = el;
            this.placeholder = this.dd.children('span');
            this.opts = this.dd.find('ul.dropdown > a');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.dd.on('hover', function(event){
                    $(this).toggleClass('active');
                    return false;
                });

                obj.opts.on('hover',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var dd = new DropDown( $('#dd') );

            $(document).hover(function() {
                // all dropdowns
                $('.wrapper-dropdown-3').removeClass('active');
            });

        });

    </script>

Answer 1

私はこれがうまくいくと思います：

 $(function() {

        var dd = new DropDown( $('#dd') );

        $('.wrapper-dropdown-3').hover(function() {
            $(this).toggleClass('active');
        });

    });

何か問題があれば、そう言ってください。

Answer 2

試す：

            obj.dd.on('mouseenter', function(event){
                $(this).toggleClass('active');
                return false;
            });

            obj.opts.on('mouseleave',function(){
                var opt = $(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.val);
            });

Answer 3

私が間違っていなければ、hover() 関数は mouseover および mouseoff イベントを探します。マウスが上部のアイテムの上にあるときだけメニューを変更したいのはなぜですか? マウスを離すと変化します。マウスオーバーのみを使用し、ホバーの代わりにマウスリーブを使用することをお勧めします。