jQuery mouseover() Event

The jQuery mouseover event triggers when the mouse pointer is over the selected element.

Syntax of mouseover() Event

$(selector).mouseover(function) 

The selector is the element on which mouse over event occurred. The function is an optional parameter. This function is called when the mouseover event fired.

Example

<p id="mousepointer">Take mouse pointer over this text.</p>	

<script>
$(document).ready(function(){  
$("#mousepointer").mouseover(function(){  
alert("Mouseover event triggers.");  
});  
});  
</script>

Output of the above code

Take mouse pointer over this text.

In the above example, an alert message is displayed when the mouse is over the paragraph of id 'mousepointer'.


Example

<style>.box{width: 200px; height: 150px; border: 2px solid black; padding: 10px; } </style>
<div class="box">Take mouse over me</div> 

<script>
$(document).ready(function(){ 
$(".box").mouseover(function(){  
$(".box").css({"background-color":"#ffffad"});
});
});  
</script>

Output of the above code

Take mouse over me

In the above example, the background color of the div box is changed when the mouse is over the div box.



Read more articles


General Knowledge



Learn Popular Language