Use hover event with LI lists in jQuery

Description

The following code shows how to use hover event with LI lists.

Example


<!--from ww  w.  j a v a2  s  .  co m-->
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").hover(
function () {
$(this).append($("<span>*</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
});
</script>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>

Click to view the demo

The code above generates the following result.

Use hover event with LI lists in jQuery

Home »
  Javascript Tutorial »
    jQuery »
      jQuery Event

...
Handle form select change event in jQuery
Handle input text element key type event in...
Handle the first time click event on div ta...
Handler div element mouse hover event in jQ...
Hover to fade in and out in jQuery
Hover to hide tag in jQuery
Listen to keydown event in jQuery
Listen to keyup event for input element in ...
Listen to load event in jQuery
Listen to mouse down event in jQuery
Listen to mouse enter event in jQuery
Listen to mouse leave event in jQuery
Listen to mouse out event in jQuery
Listen to mouse over event in jQuery
Listen to mouse up event in jQuery
Listen to scroll event in jQuery
Listen to the escape key in jQuery
Listen to the unload event in jQuery
Remove click event from div tag in jQuery
Return false to cancel event and prevent it...
Set focus for an input text element in jQue...
Set focus to text box in jQuery
Set value in case of focus event in jQuery
Show the typed value for keyup event in jQu...
Trigger a custom event in jQuery
Trigger click event in jQuery
Trigger click handler in jQuery
Trigger focus event handler in jQuery
Trigger mouse over event in jQuery
Trigger slide up with double click in jQuer...
Trigger the change event in jQuery
Unbind all events from div in jQuery
Unbind all live events from all paragraphs ...
Unbind an event handler function in jQuery
Unbind click event in jQuery
Use blur event to change the style for the ...
Use event.which to check the key code in ke...
Use hover action to add and remove class in...

Use hover event with LI lists in jQuery