Responding to mouse events

This recipe demonstrates how to write event handlers for common mouse events that occur on a web page, such as mouseover and mouseout. The constructs used in this example are summarized as follows:

Construct	Type	Description
$(".class")	jQuery selector	This matches all elements with the specified CSS class.
$(this)	jQuery object	This refers to the current jQuery object
.attr("name") or .attr("name", "value")	jQuery method	This returns a string with the value of the required attribute of the first matched element. It can also be used to set the attribute to the required value.
.appendTo()	jQuery method	This appends each matched element to the end of the target element.
input	jQuery selector	This selects all input elements.
mouseout	jQuery event	This is fired when the mouse pointer leaves a control. It corresponds to the JavaScript mouseout event.
mouseover	jQuery event	This is fired when the mouse pointer enters a control....