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 to the CF scene
    Join Date
    Jun 2012
    Location
    Missouri
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How To Use Hover On a Div

    I couldn't find this online. I was wondering how one would make a hover for a div, like on a navigation bar. This is my Code for HTML:
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="vlpstyle.css" />
    <title>
    VLP Home
    </title>
    </head>
    <body>
    	<div class="mainbox">
    		<div class="greensecbg">
    			<div class="gsbgtext">This is the heading. You should be puting an image in here that is a bit smaller than, say, 300px x 170px so that it will fit.</div>
    		</div>
    		<br><br>
    		<div class="navbar1">
    			<div class="navbartext">
    				<a href="index.html">Home</a>
    			</div>
    		</div>
    		<br><br>
    		<div class="navbar2">
    			<div class="navbartext">
    				<a href="news.html">News</a>
    			</div>
    		</div>
    		<br><br>
    		<div class="navbar3">
    			<div class="navbartext">
    				<a href="media.html">Media</a>
    			</div>
    		</div>
    		<br><br>
    		<div class="navbar4">
    			<div class="navbartext">
    				<a href="downloads.html">Downloads</a>
    			</div>
    		</div>
    		<br><br>
    		<div class="navbar5">
    			<div class="navbartext">
    				<a href="info.html">Info</a>
    			</div>
    		</div>
    		<br><br>
    		<div class="navbar6">
    			<div class="navbartext">
    				<a href="forum.html">Forum</a>
    			</div>
    		</div>
    		<br><br>
    		<div class="bluesecbg">
    			<p>This is where all of your important information goes!! Make sure to add everything you want people to see right here :D 
    		</div>
    		<br>
    		<div class="purplesecbg"><br>
    			<div class="purpleiconbox">
    			<br>Icon<br>100px x 100px
    			</div>
    			<p>This is where user information, updates, ads or the like go.
    		</div>
    		
    	</div>
    		<div class="footer">
    			<hr width="300">
    			Website Made By Audrey + Jackson Barnes in 2012.
    		</div>
    </body>
    </html>
    And this is my CSS code so far:
    Code:
    body
    {
    background-color: #bfbfbf;
    color: #fff;
    font-family:lucida console;
    }
    
    div.bluesecbg
    {
    background-color:#4970E4;
    border:0px solid black;
    border-radius:20px;
    float:right;
    margin-left: 15px;
    margin-top:15px;
    width:500px;
    min-height:205px;
    }
    
    p
    {
    color: #fff; 
    font-size:12px;
    font-family: lucida console;
    margin-left:10px;
    margin-right:30px;
    margin-top:10px;
    margin-bottom:10px;
    }
    
    div.greensecbg
    {
    margin-left: 15px;
    margin-top:15px;
    width:500px;
    height:210px;
    background-color:#50B038;
    border:0px solid #50B038;
    border-radius:20px;
    position:absolute;
    z-index:-1;
    }
    
    div.gsbgtext
    {
    margin-right:120px;
    margin-left:10px;
    margin-top:10px;
    margin-bottom:10px;
    font-size:11px;
    }
    
    div.mainbox
    {
    background-color: #fefefe;
    width:700px;
    min-height:417px;
    border:3px solid #f2f2f2;
    border-radius:20px;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
    z-index:-1;
    left:25%;
    }
    
    .navbar1
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    width:300px;
    position:relative;
    float:right;
    }
    
    div.navbar2
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    width:300px;
    position:relative;
    float:right;
    }
    
    div.navbar3
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbar4
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbar5
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbar6
    {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    float:right;
    width:300px;
    position:relative;
    }
    
    div.navbartext
    {
    margin-left:5px;
    margin-bottom:5px;
    margin-top:5px;
    position:relative;
    }
    
    div.footer
    {
    font-size:9px;
    color:teal;
    text-align:center;
    position:absolute;
    left:40%;
    bottom:0%;
    }
    
    div.purplesecbg
    {
    float:left;
    background-color:#6C3A8A;
    border: 0px solid black;
    border-radius:20px;
    width:170px;
    min-height:200px;
    margin-left:15px;
    }
    
    div.purpleiconbox
    {
    background-color:#AB72CC;
    border:0px solid black;
    border-radius:20px;
    width:120px;
    height:120px;
    position:relative;
    left:15%;
    text-align:center;
    }
    One last thing I would like to mention, is that I tried doing div.[divname]:hover and it didn't work..

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    you have a couple of unclosed <p>s.

    Close them, and try again.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Looks like you were on the right track. Once you declare your doctype (e.g., <!DOCTYPE html> for HTML5 ), IE should play nice and make :hover work out. Then it's just a matter of changing the background color/image and cursor, and you're good to go.

    By the way, a few suggestions:
    -Remove the link underlines with text-decoration:none .
    -Exchange the <br>'s for clear:both and a small bottom margin.
    -Some of your classes are redundant. If they have all the same attributes, make them the same class, and add an extra one only for exceptions, as I did with the ".pic" class below.

    Here's the whole package:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .navbar {
    background-color:#68E449;
    border:0px solid black;
    border-radius:20px;
    width:300px;
    position:relative;
    float:right;
    clear:both; 
    margin-bottom:10px;
    }
    .navbar:hover { background-color:#ccc; cursor: pointer; }
    
    .navbartext {
    margin-left:5px;
    margin-bottom:5px;
    margin-top:5px;
    position:relative;
    }
    .navbartext a { text-decoration:none; }
    
    .pic { background-image:url('pic.png'); }
    .pic:hover { background-image:url('pic2.png'); }
    
    </style>
    </head>
    
    <body>
    
    		<div class="navbar">
    			<div class="navbartext">
    				<a href="index.html">Home</a>
    			</div>
    		</div>
    		<div class="navbar pic">
                    <!-- extra class to add background image -->
    			<div class="navbartext">
    				<a href="news.html">News</a>
    			</div>
    		</div>
    </body>
    </html>
    Related:
    CodingForums: Any way to put img hover state in inline css?
    Bernzilla: Getting :hover to Work in IE7 [and beyond]


  •  

    Tags for this Thread

    Posting Permissions

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