我将尽力解释这一点。我使用本教程http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/为我的网站使用水平导航菜单。我目前正在尝试调整教程中的 javascript。当我在每个链接上移动鼠标时，我想保持鼠标悬停在每个链接上，但我希望始终突出显示选定的链接（它目前没有此功能）。
我遇到的问题：如果我目前在投资组合链接上并且它被突出显示并且我最后将鼠标悬停在主页按钮上（在将鼠标从菜单 div 移开之前）它会突出显示我的主页链接，即使我目前在我的投资组合页面。
这是我的代码：
$(document).ready(function(){
var $menu = $("#slidingMenu");
/**
* the first item in the menu,
* which is selected by default
*/
var $selected = $menu.find('li:first');
/**
* this is the absolute element,
* that is going to move across the menu items
* it has the width of the selected item
* and the top is the distance from the item to the top
*/
var $moving = $('<li />', {
'class' : 'move',
'top' : $selected[0].offsetTop + 'px',
'width' : $selected[0].offsetWidth + 'px'
});
/**
* each sliding div (descriptions) will have the same top
* as the corresponding item in the menu
*/
$('#slidingMenuDesc > div').each(function(i){
var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});
/**
* append the absolute div to the menu;
* when we mouse out from the menu
* the absolute div moves to the top (like innitially);
* when hovering the items of the menu, we move it to its position
*/
$menu.bind('mouseleave',function(){
//moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){
var $this = $(this);
var offsetLeft = $this.offset().left + $(window).width() - ($this.outerWidth() + 20);
//slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});
/**
* moves the absolute div,
* with a certain speed,
* to the position of $elem
*/
function moveTo($elem,speed){
$moving.stop(true).animate({
top : $elem[0].offsetTop + 'px',
width : $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
});
这是我的菜单CSS：
body{
background:#292929;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.slidingMenu {
position: absolute;
top:250px;
left: 0px;
padding-bottom: 10px;
width: 400px;
}
.slidingMenu li {
display:block;
float:left;
clear:both;
padding-left: 12px;
height: 52px;
line-height: 52px;
}
.slidingMenu li.selected{
display:block;
float:left;
clear:both;
padding-left: 12px;
height: 52px;
line-height: 52px;
}
.slidingMenu li.move {
width: 9px;
position: absolute;
z-index: 8;
background: #df0101;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#a70404),
to(#df0101)
);
background:
-moz-linear-gradient(
top,
#a70404,
#df0101
);
-moz-border-radius: 0px 8px 8px 0px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}
.slidingMenu li a {
font-size:50px;
text-transform:uppercase;
text-decoration: none;
color: #FFF;
text-indent:5px;
z-index: 10;
display: block;
z-index: 10;
float: right;
line-height: 50px;
position: relative;
padding-right:10px;
}
/* Descriptions */
.slidingMenuDesc{
margin-top:40px;
position:relative;
}
.slidingMenuDesc div{
background: #df0101;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#a70404),
to(#df0101)
);
background:
-moz-linear-gradient(
top,
#a70404,
#df0101
);
height: 52px;
right:-5px;
width:0px;
overflow:hidden;
position:absolute;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius: 8px 0px 0px 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.slidingMenuDesc div span {
font-size:24px;
color: #f0f0f0;
display: block;
z-index: 10;
line-height: 52px;
position:absolute;
margin-left: 30px;
}
希望我已经解释得足够清楚了。我的 javascript 技能非常薄弱——我才开始使用这种编码格式，因为这是我第一次尝试创建网站。提前感谢您的帮助。