当鼠标离开主菜单时,如何删除课程?

时间:2016-01-15 11:53:45

标签: jquery css

为了解释这种情况,我将鼠标光标后面的菜单突出显示应用到这里的网站:http://ike.co.kr/English/main.html

将鼠标悬停在菜单上时,您可以看到跟随背景。

但是当鼠标没有在菜单上时,如何使突出显示的背景从菜单中消失?

以下是我正在使用的js脚本。

感谢。

 (function($){
//define methods of the plugin
var methods = {
    init: function(options){

        //set up some default values
        var defaults = {
            'side' : 'right'            
        }

        //for each element with vLine applied
        return this.each(function(){

            //override defaults with user defined options
            var settings = $.extend({}, defaults, options);       

            //cache variable for performance
            var $this = $(this);

            //wrap the UL with a positioned object just in case
            $this.wrap('<div style="margin:0 auto;position:relative;width:'+$this.css('width')+';height:'+$this.css('height')+';"></div>');

            //test to see if element exists, if not, append it
            if(!$('.vLine').length){

                //parent is the ul we wrapped
                //insert the vLine element into the document
                $this.parent().append($('<div style="position:absolute;top:'+$this.position().top+'px;height:20px'+$this.height() / $this.find('li').length+'px;width:200px; z-index:-1" class="vLine"></div>'));                            
                //do we want to show it on the left or right?
                if(settings.side = 'right'){
                    $('.vLine').css('right', '0');
                }else if(settings.side = 'left'){
                    $('.vLine').css('left', '0');
                }
            }

            //define the hover functions for each li
            $this.find('li').hover(function(e){                       
                $('.vLine').stop().animate({
                    top: $(this).position().top    
                },200);    
            }, function(e){  
               //we want to reset the line if this is met
               if(['UL', 'LI'].indexOf(e.toElement.tagName) == -1){
                    $('.vLine').stop().animate({
                        top: '1px'
                    });                            
                }                    
            });                
        });
    }            
}

//make it a function!
$.fn.vLine = function( method ) {
    if (methods[method]) {
        return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.vLine'     );
    }
};
})(jQuery);

//on document ready
$(function(){

//invoke our vLine!
$('.main_menu').vLine();
});

0 个答案:

没有答案