Why is my hover css being removed by jQuery?
I was wanting to have an on hover feature in combination with a currently
selected item feature for navigation. The hover feature is there when the
page first loads; however, after selecting an item (and running the
script), the hover css seems to have been removed and I'm not sure why.
Here is my file (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>
No comments:
Post a Comment