PDA

View Full Version : div hover colors

bendman
12-31-2004, 03:40 PM
I remember back in the day I was making a div (or table, not sure) and had it so when the mouse hovered over it the background color would change. I'm trying to do that now with some divs for my nav but I completely spaced on how this works. I'm pretty sure it just used css, similar to the a:hover, but if it takes jscript that'd be cool too :D

jist: can somebody tell me how to change div background-color on hover?
AaronCampbell
12-31-2004, 03:50 PM
:hover works on divs in MOST browsers, but NOT in Internet Explorer. In IE, it only works on a tags.
bendman
12-31-2004, 03:52 PM
fine with me, IE users don't like a static background maybe they can get a different browser :P
bendman
12-31-2004, 03:58 PM
worked perfect!

thanks a bunch :D
AaronCampbell
12-31-2004, 04:01 PM
no problem, just remember that IE users still make up the vast majority of internet users. (We all wish they didn't, but they do.)
coothead
12-31-2004, 05:09 PM
Hi there bendman,

here is the cross browser td hover css..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>td hover color change</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#9900aa;
}
#container {
width: 200px;
margin: 30% auto;
}
#cell {
width: 200px;
height: 50px;
border:solid 1px #000;
}
a#anchor {
display: block;
width: 200px;
height: 50px;
background: #000;
}
a#anchor:hover {
background:#fff;
}
/*//]]>*/
</style>

</head>
<body>

<div id="container">
<table><tr>
<td id="cell"><a id="anchor" href="#"></a></td>
</tr></table>
</div>

</body>
</html>
bendman
12-31-2004, 05:20 PM
I'm gonna stick with what I've got now though, it's just a little useless eyecandy, and it would take a while to get TDs in there instead of divs.

thanks anyway coot :D
coothead
12-31-2004, 05:59 PM
Hi there bendman,

I do not normally use tables for display :supereek:
Your original post inferred either a table or a div, so I
used the table as an example. The code will work
exactly the same if a div is used instead :D
bendman
01-01-2005, 12:38 AM
oh! cool :D
coothead
01-01-2005, 04:46 AM
Hi there bendman,

glad that you like it :)

You may be interested to know that the same method
can be used with images. As a refinement you can even
do a rollover with a single image. Check out this thread (http://www.htmlforums.com/showthread.php?s=&threadid=45580)
Cool-August
01-01-2005, 07:31 PM
How about this, bendman? :)
It doesn't use much CSS though.

<!---Head--->
<HTML>
<HEAD>
<TITLE> </TITLE>
<style>
.colorA {color:red;}
.colorB {color:blue; text-decoration:none;}
.colorC {color:lime;}
</style>
<SCRIPT>
<!--

function RollOver (Ltext,lyr,lnk,oldcls,newcls,over)
{
var NS=(document.layers) ? true : false;
var HiLev=(document.getElementById) ? true : false;
var IE=(document.all) ? true : false;
var str="<A CLASS='" + newcls + "' HREF='" + lnk + "'";
if (over)
{
str += " onMouseOut=\"RollOver(\'";
}
else
{
str+= " onMouseOver=\"RollOver(\'";
}
str += Ltext + "\', \'" + lyr + "\',\'" + lnk + "\', \'";
str += newcls + "\', \'" + oldcls;
if (over)
{
str += "\', false)\">" + Ltext + "</A>";
}
else
{
str += "\', true)\">" + Ltext + "</A>";
}
if (NS)
{
with (document.layers[lyr].document)
{
open();
write(str);
close();
}
}
else
{
if (HiLev)
{
document.getElementById(lyr).innerHTML=str;
}
else
{
if (IE)
{
document.all[lyr].innerHTML=str;
}
}
}
}
//-->
</SCRIPT>
<!---Body--->


<SPAN ID="div1id" STYLE="position:absolute">
<A CLASS="colorB" HREF="www.blah1.com" onMouseOver="RollOver('go to blah','div1id',this.href,'colorB','colorC',true)">go to blah</A>
</SPAN>
<BR><BR>
<SPAN ID="div2id" STYLE="position:absolute">
<A CLASS="colorB" HREF="www.blah2.com" onMouseOver="RollOver('go to blahblah','div2id',this.href,'colorB','colorA',true)">go to blahblah</A>
</SPAN>
<BR><BR>
<SPAN ID="div3id" STYLE="position:absolute">
<A CLASS="colorB" HREF="www.blah1.com" onMouseOver="RollOver('NOT here','div3id',this.href,'colorB','colorA',true)">NOT here</A>
</SPAN>
<BR><BR>

- August