jquery hover to reveal box beneath

Discussion in 'Programming' started by Contagious, Jan 9, 2010.

to remove all ads.
  1. Contagious

    Contagious New Member

    Messages:
    2
    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:

    [​IMG]

    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...
     
  2. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    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: Jan 9, 2010
  3. Contagious

    Contagious New Member

    Messages:
    2
    Works perfectly, thanks a lot :)
     

Share This Page