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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Change Text In Anchor Example</title>
<style type="text/css">

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {

     // Follow
     $("a.follow").toggle(function() {
          $("a.follow").removeClass("green-button");
          $("a.follow").addClass("black-button");
          $("a.follow").children().text('UnFollow');
     }, function() {
          $("a.follow").removeClass("black-button");
          $("a.follow").addClass("green-button");
          $("a.follow").children().text('Follow');
     });

     // Join
     $("a.join").click(function () {
          $(this).hide();
     });

     // Helpful
     $("a.black-button.helpful").click(function () {
          if ($(this).hasClass("clicked")) {
               $(this).removeClass("clicked")
          }
           else {
               $(this).addClass("clicked")
          }
     });

     // Report
     $("a.report").click(function () {
          $(this).hide();
          $(this).before("<div class='reported'>Reported</div>");
     });

});
</script>
</head>
<body>
<div class="container">
     <a href="javascript:void(0)" class="green-button follow"><span>Follow</span></a>

     <a href="javascript:void(0)" class="black-button join"><span>Join Now</span></a>

     <a href="javascript:void(0)" class="black-button helpful"><span>Helpful<div></div></span></a>

     <a href="javascript:void(0)" class="report">Report</a>
</div>
</body>
</html>

Explanation:

To begin, I am assuming that if you are reading this you have some decent understanding of CSS, if you don't you are welcome to contact me. What I have built here are 4 examples of types of anchor buttons that can be used in web 3.0 sites. There is a "Follow" that becomes an "UnFollow," a "Join Now" that disappears, a thumbs up "Helpful" that changes color, and a "Repot" anchor that becomes a "Reported" div. Ignore the first three lines of CSS, they are just there to set the frame for the page. The second section, "green-button black-button," is my prototypical self expanding liquid anchor button. The third section, "a.black-button.helpful," is there to drive the thumbs up "Helpful" anchor button. The last section, "a.report," drives the "Report" anchor.

Lets begin with the "Follow/UnFollow" anchor button. (This is by far the most complicated script on this page so don't feel bad if you are a beginner and don't get it at first.) What I have built is a loop. What is does is when you click on an anchor with the class of "follow," it fires the toggle that will remove the class of "green-button" (if the anchor has the class of "green-button") then add the class of "black-button," effectively changing the background color to black. Next look or the children, the span that has the text "Follow," and change it to "UnFollow." The next section does the opposite. If the anchor has a class of "black-button," remove it and add the the class "green-button," effectly changing the background color to green. Next look at the the children, the span that has the text "UnFollow," and change it to "Follow."

The second section is the "Join." This is just a prototypical hide after clicked. The purpose is to communicate to the server, upon full intigration, that the user wants to join, and to prevent them from clicking on the "Join" button multiple times, while confirming that they have infact joined. So what is going on in the script is saying: when you click on a anchor with the class of "join," then hide it. The, then hide is is signified by "$(this).hide();." The "$(this)" signifies the parent of "a.join" and the ".hide()" tells the function to hide it.

The third section is the "Helpful." What is going on here is an if / else loop. So When the anchor that has both classes of "black-button" and "helpful." It looks to see if you have the class of "clicked," and if it does have the class of "clicked" then remove it. Next ("else") if it does not have the class of "clicked" then add the class of "clicked."

If you look in the styles you will see what is driving the classe of "clicked." ("a.black-button.helpful.clicked{color:#a6e610;}" and "a.black-button.helpful.clicked span div{background-position:0 -15px;}") All that is hapening is that we are moving a sprite image of a thumbs up that is white to green, along with changeing the color of the text. So the jQuery is effectively adding and removing the class of "clicked" when the user clicks on it.

The last section is the "Report." What is going on here is that we are going to hide the anchor and append before it. The finished product will make it so the user can click on the Report, then it says "Reported," but can't click on it again. (Before I begin, I use the word append becuse there are three basic ways to append. The classic .append() changes the object you want to change. If you want to render something before or after an object you use the .before() or .after().

Line-by-Line break down. When you click on an anchor that has the class of "report," "$("a.report").click." Then hide that anchor, "$(this).hide();." Then render the div this exact line ("<div class='reported'>Reported</div>") before the anchor, "$(this).before("<div class='reported'>Reported</div>");." The styles are controled by "a.report, .reported{float:left;position:relative;top:6px;color:#9E9E9E;font-size:11px;*top:7px;}" and ".reported{cursor:default;color:#8fbc2d;margin-left:10px;}."

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:

Explanation:

Contact Me

Follow Me On Twitter

New Media

AjaxEra