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

2 Comments

  • It’s the best time to make some plans for the longer term and it is time to be happy. I’ve read this put up and if I may just I desire to recommend you some attention-grabbing things or tips. Maybe you could write next articles relating to this article. I wish to read even more issues approximately it!

  • Johna206

    I am just seeming both for blog sites which give independent, nutritious commentary on all difficulties or blogging sites which have a liberal or droppedwing slant. Thank you..

Leave a Reply

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