How To Enable Live Hover With jQuery UI Icons
erics, Posted May 8th, 2011 at 2:11:34am
The HTML:
|
1 2 3 4 |
<ul class="icons ui-widget ui-helper-clearfix"> <li id="AddItem" class="ui-state-default ui-corner-all" title="Add Item"><span class="ui-icon ui-icon-plusthick"></span></li> <li id="AddToFavorites" class="ui-state-default ui-corner-all" title="Add to Favorites"><span class="ui-icon ui-icon-heart"></span></li> </ul> |
The CSS:
|
1 2 3 4 5 6 7 8 9 |
ul.icons li { cursor: pointer; float: left; list-style: none; margin: 2px; padding: 2px 0px; position: relative; } |
The jQuery:
|
1 2 3 4 5 |
jQuery('ul.icons li') .live("mouseover mouseout", function (event) { if (event.type == "mouseover") jQuery(this).addClass("ui-state-hover"); else jQuery(this).removeClass("ui-state-hover"); }); |
Categories: How-To's, Technology Button, Hover, Icon, Icons, JQuery, jQuery UI, live, Live Hover, mouseout, mouseover
Leave Your Comment
All fields marked with "*" are required.