我想在导航中实现一个悬停特效和当前选定项目特效的结合。当页面第一次加载时,悬停特效已经存在;然而,在选择一个项目(并运行脚本)之后,悬停CSS似乎已经被删除了,我不确定为什么。这是我的文件 (jsfiddle):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/favicon.ico">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<title>TITLE</title>
<style>
ul {
list-style: none;
}
li {
background-color: orange;
color: white;
float: left;
padding: 10px;
}
li:hover {
background-color: grey;
color: black;
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<script type="text/javascript">
$("li").click(function() {
$("li").each(function() {
$(this).css({'background-color' : 'orange',
'color' : 'white'});
});
setHighlighted(this);
});
var setHighlighted = function(ref) {
$(ref).css({'background-color' : 'grey',
'color' : 'black'
});
}
</script>
</body>
</html>