...

View Full Version : How To Use Hover On a Div



asbxzeeko
06-18-2012, 10:40 AM
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:

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

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

Lerura
06-18-2012, 11:27 AM
you have a couple of unclosed <p>s.

Close them, and try again.

awgentry
06-18-2012, 03:38 PM
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:


<!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? (http://www.codingforums.com/showthread.php?t=264499)
Bernzilla: Getting :hover to Work in IE7 [and beyond] (http://www.bernzilla.com/item.php?id=762)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum