Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    96
    Thanks
    1
    Thanked 13 Times in 13 Posts

    Changing Div background on hover

    Hey guys, So I have a top navigation bar with links in it and when I hoover over a link I want the navigation bars background image to change. The links are actually Images with an <a href=""></a> tag around them. The site isn't live so I can't give you a link. Here is the code:

    HTML ( I want the id="Nav" background to change when I hover over the "Home" "Forums" "Downloads" "Contact" Images )
    Code:
    				<div id="Nav">
    					<div id="Splitters" class="clearfix">
    						<div id="group1">
    							<img id="Layer_3_copy" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
    						</div>
    						<div id="group2">
    							<img id="Layer_3_copy_3" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
    						</div>
    						<div id="group3">
    							<img id="Layer_3_copy_4" src="images/Layer_3_copy_3.png" alt="" width="2" height="67" />
    						</div>
    					</div>
    					<div id="Nav_Text" class="clearfix">
    						<a href="#">
    							<img id="Home" src="images/Home.png" alt="" width="48" height="11" />
    						</a>
    						<a href="#">
    							<img id="Forums" src="images/Forums.png" alt="" width="71" height="11" />
    						</a>
    						<a href="#">
    							<img id="Downloads" src="images/Downloads.png" alt="" width="109" height="11" />
    						</a>
    						<a href="#">
    							<img id="Contact" src="images/Contact.png" alt="" width="80" height="11" />
    						</a>
    					</div>
    				</div>
    CSS
    Code:
    #Nav {
    	background: url(images/Main.png) no-repeat;
    	left: 0;
    	min-height: 70px;
    	position: absolute;
    	top: 0;
    	width: 100%;
    }
    #Splitters {
    	left: 421px;
    	position: absolute;
    	top: 0;
    	width: 334px;
    }
    #group1 {
    	display: inline;
    	float: left;
    	margin: 0 0 0 107px;
    	width: 2px;
    }
    #Layer_3_copy {
    	clear: both;
    	float: left;
    	margin: 0;
    	width: 2px;
    }
    #group2 {
    	float: left;
    	margin: 0 0 0 95px;
    	width: 2px;
    }
    #Layer_3_copy_3 {
    	clear: both;
    	float: left;
    	margin: 0;
    	width: 2px;
    }
    #group3 {
    	float: right;
    	margin: 0;
    	width: 2px;
    }
    #Layer_3_copy_4 {
    	clear: both;
    	float: left;
    	margin: 0;
    	width: 2px;
    }
    #Nav_Text {
    	left: 449px;
    	position: absolute;
    	top: 29px;
    	width: 397px;
    }

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    77
    Thanks
    0
    Thanked 12 Times in 11 Posts
    Code:
    a:hover{background-color:#FFF;
                background:imageurl;
    }

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    96
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Can't do it with pure css it's not a parent div. However I figured it out anyway.

    Code:
    <script type="text/javascript">
    function mouseover()
    {
    var e = document.getElementById('Nav'); 
     
    e.style.background='url(images/Home_Hover.png)';
    
    }
    function mouseover2()
    {
    var e = document.getElementById('Nav'); 
     
    e.style.background='url(images/Forum_Hover.png)';
    
    }
    function mouseover3()
    {
    var e = document.getElementById('Nav'); 
     
    e.style.background='url(images/Downloads_Hover.png)';
    
    }
    function mouseover4()
    {
    var e = document.getElementById('Nav'); 
     
    e.style.background='url(images/Contact_Hover.png)';
    
    }
    function mouseout()
    {
    var e = document.getElementById('Nav'); 
     
    e.style.background='url(images/Main.png)';
    
    }
    </script>
    Code:
    <div id="Nav" style="background:url(images/Main.png) no-repeat;">
    	<div id="Splitters" class="clearfix">
    		<div id="group1">
    			<img id="Layer_3_copy" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
    		</div>
    		<div id="group2">
    			<img id="Layer_3_copy_3" src="images/Layer_3_copy.png" alt="" width="2" height="65" />
    		</div>
    		<div id="group3">
    			<img id="Layer_3_copy_4" src="images/Layer_3_copy_3.png" alt="" width="2" height="67" />
    		</div>
    	</div>
    	<div id="Nav_Text" class="clearfix">
    		<a href="#"><img id="Home" src="images/Home.png" onMouseOver="mouseover()" onMouseOut="mouseout()" alt="" width="48" height="11" /></a>
    		<a href="#"><img id="Forums" src="images/Forums.png" onMouseOver="mouseover2()" onMouseOut="mouseout()" alt="" width="71" height="11" /></a>
    		<a href="#"><img id="Downloads" src="images/Downloads.png" onMouseOver="mouseover3()" onMouseOut="mouseout()" alt="" width="109" height="11" /></a>
    		<a href="#"><img id="Contact" src="images/Contact.png" onMouseOver="mouseover4()" onMouseOut="mouseout()" alt="" width="80" height="11" /></a>
    	</div>
    </div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •