为了解释这种情况,我将鼠标光标后面的菜单突出显示应用到这里的网站: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();
});