I would like to share my experience about jQuery div click events on mouse hover. We'll have a block of content that when the mouse moves over the div it will changes its color and then after mouse click on div.
Let's have a sneak peak through an example about what I am trying to explain you.
Example
<html>
<head>
<title>JQuery Example</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).bind(
'ready',
function () {
$('div').bind(
'mouseover',
function () {
$(this).addClass('MouseOver');
}
);
$('div').bind(
'mouseout',
function () {
$(this).removeClass('MouseOver');
}
);
$('div').bind(
'click',
function () {
if ($(this).hasClass('MouseOn')) {
$(this).removeClass('MouseOn');
} else {
$(this).addClass('MouseOn');
}
}
);
}
);
</script>
<style type='text/css'>
div {
border: 1px solid rgb(200, 200, 200);
width: 36px;
height: 88px;
margin: 5px;
float: left;
}
div.MouseOver {
background: orange;
}
div.MouseOn {
background: blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Output
When you move mouse over a specific div it will be appear orange and changes its color into blue when you click on it. If you click again on that div it turns into orange and then white after mouse hover.