Add Remove CSS Class Mouseover with JQuery

Home / JQuery / Add Remove CSS Class Mouseover with JQuery

Sometimes we need to change css class on mouseover and mouseout event some of div, images, paragraph for the set any effect or beautiful looks. If you want to change any css class on mouseover this is possible to make very easily using of Jquery. Only three to four lines of code need write in jquery function to make or set any mouseover event to change css style class.

Change style class on mouseover with Jquery

Here is the one div which is shows navigation menu.

<div clas="leftside">
        <div class="navOut"><a href="#">ITEM 1</a></div>
        <div class="navOut"><a href="#">ITEM 2</a></div>
        <div class="navOut"><a href="#">ITEM 3</a></div>
        <div class="navOut"><a href="#">ITEM 4</a></div>
</div>

Here is the jQuery function to add rollover effects to this navigation:

<script type="text/javascript">
$("div.navOut").mouseover(function(){
	$(this).removeClass().addClass("navOver");
	}).mouseout(function(){
	$(this).removeClass().addClass("navOut");		
});
</script>

Using the above Jquery function when user mouseover div or class “navOut” then call this jQuery function and replace this class to “navOver” and when mouseout so its call “navOut” class.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *