jQuery Change LI On Hover Example
Do you just need a simple way to change the li and CSS just does not cut it for all browser varients? This example will show you how to do it with jQuery.
Code Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Change LI Hover Working Example</title>
<style type="text/css">
<!--
ul, ol{margin:4px 0 4px 26px;padding:1px 0 1px 0;}
ul li, ol li{font-size:13px;margin:0;list-style-image:url(bullet-green.png);clear:both;margin-bottom:3px;word-wrap:break-word;}
ul li.hover{list-style-image:url(bullet-grey.png);}
ul a.link, ol a.link{font-size:13px;line-height:17px;color:#646c6f;}
ul a.link:hover, ol a.link:hover{color:#8bba47;}
ol li{list-style-image:none;color:#8bba47;}
ol li span{color:#9e9e9e;}
ol li.hover{color:#646c6f;}
-->
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("a.link").mouseover(function () {
$(this).parent().addClass("hover");
});
$("a.link").mouseleave(function () {
$(this).parent().removeClass("hover");
});
});
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" class="link">Justo cursus sit amet</a></li>
<li>Justo cursus sit amet</li>
</ul>
<ol>
<li><a href="javascript:void(0)" class="link">Justo cursus sit amet</a></li>
<li><span>Justo cursus sit amet</span></li>
</ol>
</body>
</html>
Explanation:
To start off, I have found CSS limiting to get browser compliance to change the color of the li on hover. I find that by using jQuery, you don't have to bother to spend extra time on browser compliance making sure every older browser varient is correct, particularly IE6 & IE7.
First, I'm going to set the styles on what I want to happen. (My assumption is that if you are reading this you have some basic understanding of CSS, if you don't you are welcome to contact me.) The most important part is ".ul li.hover{list-style-image:url(bullet-grey.png);}" and "ul a.link:hover, ol a.link:hover{color:#8bba47;}." What this is saying is to switch the list style image when a class of "hover" is attached to the li ("li.hover"). The second part changes the color "#8bba47" of the text on hover.
For extra credit I made this script compliant for ordered list as well. I basically truned off the list style image "list-style-image:none;."
The second part is to add the jQuery library "<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>." and place your instructions in a document.ready function "$(document).ready(function() ."
What is going on here is that the jQuery script is telling the parent li to add and remove the class "hover" when you mouseover and mouseleave. (To get a concept of what the jQuery is doing, you can replace statically <li><a href="javascript:void(0)" class="link">Justo cursus sit amet</a></li> with <li class="hover"><a href="javascript:void(0)" class="link">Justo cursus sit amet</a></li> in the html.)