Handler div element mouse hover event in jQuery

Description

The following code shows how to handler div element mouse hover event.

Example


<!-- w w  w .  j a v a2 s  . c o 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() {
$('div').hover(
function() {
$(this).attr('id', 'justAdd');
$(this).text('This element\'s ID is: ' + $(this).attr('id'));
},
function() {
$(this).attr('id', '');
$(this).text('This element\'s ID has been removed.');
}
);
}
);

$('a').removeAttr('title');
</script>
<style type='text/css'>
div {
width: 350px;
padding: 10px;
border: 1px solid rgb(200, 200, 200);
background: #93cdf9;
margin: 5px;
}
div#justAdd {
background: #6faddd;
}
</style>
</head>
<body>
<div>Mouse over to change this element's id.</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Handler div element mouse hover event in jQuery

Home »
  Javascript Tutorial »
    jQuery »
      jQuery Event

...
Cancel future event in jQuery
Cancel jQuery event in jQuery
Change style for mouse over event in jQuery
Change the font weight and color of all Ita...
Convert key code to char in keypress event ...
Execute an event only once in jQuery
Fire focus event and add style to the nearb...
Get event in page in jQuery
Get event target and work on it in jQuery
Get the event location in jQuery
Get the keycode from event from keydown eve...
Handle a click event and displays the tag n...
Handle anchor click event in jQuery
Handle click event once in jQuery
Handle click event to links in unordered li...
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...