Published on: 29 October, 2013

Jquery Example using mouseover and mouseout effects

Posted by andy | 11081 views 4 likes 3 favourites 0 comments
Tumblr Digg Google Plus

Jquery Example using mouseover and mouseout effects.

In this tutorial you will learn how you can implement a quick and easy hover div mouseover effect using JQuery and CSS. Let's consider we going to show couple boxes layout to float to the left. When user hovers the box, we want to display extra information show on top of the box and when they hover out the box, we want to hide them back.

Quick Demo

You can see the quick demo on how the effects work.

Food Name
Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..
Johnson OMarry
15
10
Food Name
Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..
Jacky Lee
45
30
Food Name
Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..
Alex Graham
115
110
Food Name
Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..
Gordon Onwatt
22
14
Food Name
Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..
Oblen Timen
125
110
Food Name
Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..
Timothy Andreas
100
20

Let's start to create above example step by step.

Firstly, we need to create repeating div information that will contain food information in our example. Basically what we want to create is to set each food information wrapped by a css class called food-box. Inside this wrapper div, it will contain food information like the food name, short description, and user information like name, comments and rating stars. The initial information that will be displayed are the food image and the user name only. The rest will be hidden by using css and only will be showed when users hover the food box.

See the quick example of the html codes listed below.

<div class="food-box">
    <div class="food-box-image"><img src="/assets/content/files/jquery/demo/food1.jpg" /></div>
    <div class="food-box-transparentbg">
        <div class="food-box-title">Food Name</div>
        <div class="food-box-desc">Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..</div>
    </div>
    <div class="food-box-uploadby">Johnson OMarry</div>
    <div class="food-box-info">
        <div class="food-box-like">15</div>
        <div class="food-box-comment">10</div>
    </div>
</div>

<div class="food-box">
    <div class="food-box-image"><img src="/assets/content/files/jquery/demo/food2.jpg" /></div>
    <div class="food-box-transparentbg">
        <div class="food-box-title">Food Name</div>
        <div class="food-box-desc">Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..</div>
    </div>
    <div class="food-box-uploadby">Jacky Lee</div>
    <div class="food-box-info">
        <div class="food-box-like">45</div>
        <div class="food-box-comment">30</div>
    </div>
</div>

<div class="food-box">
    <div class="food-box-image"><img src="/assets/content/files/jquery/demo/food3.jpg" /></div>
    <div class="food-box-transparentbg">
        <div class="food-box-title">Food Name</div>
        <div class="food-box-desc">Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..</div>
    </div>
    <div class="food-box-uploadby">Alex Graham</div>
    <div class="food-box-info">
        <div class="food-box-like">115</div>
        <div class="food-box-comment">110</div>
    </div>
</div>

<div class="food-box">
    <div class="food-box-image"><img src="/assets/content/files/jquery/demo/food4.jpg" /></div>
    <div class="food-box-transparentbg">
        <div class="food-box-title">Food Name</div>
        <div class="food-box-desc">Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..</div>
    </div>
    <div class="food-box-uploadby">Gordon Onwatt</div>
    <div class="food-box-info">
        <div class="food-box-like">22</div>
        <div class="food-box-comment">14</div>
    </div>
</div>

<div class="food-box">
    <div class="food-box-image"><img src="/assets/content/files/jquery/demo/food5.jpg" /></div>
    <div class="food-box-transparentbg">
        <div class="food-box-title">Food Name</div>
        <div class="food-box-desc">Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..</div>
    </div>
    <div class="food-box-uploadby">Oblen Timen</div>
    <div class="food-box-info">
        <div class="food-box-like">125</div>
        <div class="food-box-comment">110</div>
    </div>
</div>

<div class="food-box">
    <div class="food-box-image"><img src="/assets/content/files/jquery/demo/food6.jpg" /></div>
    <div class="food-box-transparentbg">
        <div class="food-box-title">Food Name</div>
        <div class="food-box-desc">Bacam ta la Mena gula te rama kamie la go lie soman nam la kala..</div>
    </div>
    <div class="food-box-uploadby">Timothy Andreas</div>
    <div class="food-box-info">
        <div class="food-box-like">100</div>
        <div class="food-box-comment">20</div>
    </div>
</div>
<div class="clear"></div>

Let's examine what each css doing below. I have put a comment that will help you understand what are the css used for. Note: The images we used are for example purposes only. They are sourced from Google image search.

<style type="text/css">
	/** box wrapper for each food information, each set to float to left **/
	.food-box{
		padding:7px;
		float:left;
		margin:7px;
		height:180px;
		background:#f8f6f6;
		-moz-box-shadow:  1px 1px 1px #ccc;
		-webkit-box-shadow:  1px 1px 1px #ccc;
		box-shadow: 1px 1px 1px #ccc;
		position:relative;
		cursor:pointer;
	}
	
	/** we set to force the image width to 180px **/
	.food-box-image img{
		width:180px;
	}

	/** set color to white ***/
	.white-text{
		color:#ffffff;
	}
	
	/** this is the position text of user name **/
	.food-box-uploadby{
		position:absolute;
		bottom:5px;
		left:5px;
		font-size:0.7em;
	}
	
	.food-box-title{
		padding:5px;
		font-size:0.8em;
		color:#ffffff;
	}
	
	.food-box-desc{
		font-size:0.75em;
		width:180px;
		padding:5px;
		color:#ffffff;
	}
	
	/** we hide the transparent slideup div and will only show when hovering **/
	.food-box-transparentbg{
		height:65%;
		width:100%;
		position:absolute;
		bottom:0;
		left:0;
		background:url(/assets/content/files/jquery/demo/transparent_black.png);
		display:none;
	}
	
	.food-box-info{
		font-size:0.7em;
		position:absolute;
		right:5px;
		bottom:5px;
		display:none;
		color:#ffffff;
	}
	
	.food-box-like, .food-box-comment{
		float:right;
		background:url(/assets/content/files/jquery/demo/icon_star.png) no-repeat;
		padding-left:20px;
		margin-right:10px;
		height:16px;
		line-height:16px;
	}
	
	.food-box-comment{
		 background:url(/assets/content/files/jquery/demo/icon_comment.png) no-repeat;
		 margin-right:10px;
	}
	
	.white-text{
		color:#ffffff;
	}
	
	.clear{
		clear:both;
	}
</style>

Now we are going to write a jquery script to perform those effects. Firstly we need to include a jquery library from Google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Then the next step is to write a quick javascript to automatically bind effects to the food wrapper div objects when the page has been fully loaded. Please see the comments that I have made for jquery scripts.

<script type="text/javascript">
	$(document).ready(function () {
		//we bind the effect of mouseover and mouseenter on the food-box wrapper.
		$(".food-box").bind("mouseover, mouseenter", function () {
			//this will change the user name to white text as we apply this class
			$(this).find(".food-box-uploadby").addClass("white-text");

			//this will find the child food-box-transparentbg div and slide/show the hidden box 
			$(this).find(".food-box-transparentbg").slideDown(300);

			//this will show the comments, rating information in a delay of 0.2 sec
			$(this).find(".food-box-info").show(200);

			//we bind when the effect of mouseout and mouseleave on the food-box wrapper
		}).bind("mouseout, mouseleave", function () {
			//this will find the child food-box-transparentbg div and hide the hidden box 
			$(this).find(".food-box-transparentbg").slideUp(300);

			//this will remove the class white-text we add before and will make the color back to its original color
			$(this).find(".food-box-uploadby").removeClass("white-text");

			//this will hide the comments, rating information in a delay of 0.3 sec
			$(this).find(".food-box-info").hide(300);
		});

		/*
		This is optional, if you want to enable url when user click the box, you can use this function. Otherwise you can leave it or remove it from the code.
		*/
		$(".food-box").bind("click", function () {
			window.location.href = "#";
		});
	});
</script>

That's all. Pretty easy right? You might want to modify the codes to suit your needs. Feel free to let me know if you need further help.

If you want to see the quick demo, click here to see how mouseover and mouseout works using JQuery.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.