-
Nov
4thjQuery: How to Bind a Hover Event
To bind a hover effect, in other words a mouse over and mouse out event that goes together, to an element using standard jQuery is remarkably simple. As with any other bind declaration in jQuery, you simply identify the class, ID or element type using the standard $ notation, and then call the desired action function you want to bind to with the necessary function parameters.Binding a hover function does however look a little different than a normal bind to say a click function in that it accepts two parameters – namely the function to carry out on the first mouse over event and then the second to execute on the mouse out action.
So in practice, binding a hover event would look like this:
$("li").hover( function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); });(Note that we could have used toggleClass in the example above, but this way makes it easier to understand.)
And now you know.
- ‹ Joke Factory: Fast Eating MothsJim Cheung: Avengers: The Children’s Crusade #3 Cover (2010) ›
Related Posts:
Before jQuery's native live() and delegate() functions came into being, the default for handling binding on late generated DOM elements was to make use of the excellent Brandon Aaron plugin LiveQuery (otherwise known as Live Query). Today we look at how one handles the hover event using a livequery declaration. ...
Sometimes you just don't want to use the good old anchor tag and want to use a tag instead, but at the same time, you want people who mouse-over your span tag think that it is in fact an anchor tag. Of course, this means that visually your span should now react exactly as an anchor tag would but unfortunately for ...
The question for today is how to bind a single function to multiple different elements (in other words, elements with either different classes or IDs) in a single call. Well actually, this is remarkably simple, but only because I JUST discovered that since day 1, jQuery supports the concept of a multiple selector! ...
I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement. Today's tip looks at how you can quick ...
Flot is a fantastic jQuery-driven graphing engine that is extremely flexible and capable of producing some wonderfully looking and interactive graphs. Today's quick tutorial looks at how one can add a tooltip to a flot-produced graph. The secret here is to bind our tooltip generating function to Flot's built in m ...
