jquery hover to reveal box beneath

C

Contagious

New Member
heya, well like the title says - i need a script the when a user hovers over a div another div (bellow it) becomes visable without moving other tags & divs on the page.

The image bellow illustrates this:

drop_down_box.png


Heres my basic code, note the "margin-left:420px;" for the small hover button is just for structure (there will be other stuff filling the gap)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">

#big_box {
	width:450px;
	min-height:200px
	
}
#header {
	width:100%;
	height:21px;
	margin-top:0px;
	
}
#small_div {
	width:30px;
	background-color:#999;
	margin-left:420px;
}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>


<body>



<div id="small_div">This</div>

<div id="big_box">
  <div id="header">Header
  </div>
</div>



</body>
</html>

Help will be appreciated :) - i suck at javascript...
 
zkiller

zkiller

Super Moderator
Staff member
A simple bit of Javascript can do this for you.

Code: 
function boxHover(){
	var _block = document.getElementById("col");
	_block.onmouseover = function(){
		this.className += " hover";
	}
	_block.onmouseout = function(){
		this.className = this.className.replace("hover", "");
	}
}
if (window.attachEvent){window.attachEvent("onload", boxHover);}
Your HTML would look something like this.

Code: 
<div id="main_container">
	<div id="col">
  		<a href="#">Content here.</a>
		<div class="drop">
			Content of drop box here.
		</div>
	</div>
</div>
Then you would just need to apply the appropriate CSS properties like this.

Code: 
#main_container {
	float:left;
	position:relative;
	width:380px;
	clear:both;
}
#col {
	width:380px;
	margin-top:10px;
	background-color:#CCCCCC;
	padding:5px 10px;
}

#col a {
	display:block;
	text-decoration:none;
}

#col:hover .drop {display:block}
.hover .drop{display:block !important}

.drop {
	display:none;
	position:absolute;
	background-color:#999999;
	top:39px;
	left:4px;
	width:400px;
	height:50px;
	padding:5px 10px;
}
Hope that helps. :)
 
Last edited:
You must log in or register to reply here.
Top