hover change bg div color [Archive]

View Full Version : hover change bg div color

ggalan

11-05-2010, 08:44 PM

im having a problem with something that seems simple
this works only in firefox but doesnt work on all other browsers

when hovering the 3 items inside ul class menu, i would like their background color to change stated in this line

div.mit1:hover, div.mit2:hover, div.mit3:hover { text-decoration:none; background-color:#6B6B9B;/*color:#000;*/}

however it doesnt seem to respond in safari, chrome, IE

<!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" xml:lang="en" lang="en">
<head>
<style>
#navMain { margin:0 auto; width:950px; height:150px; font-family:Helvetica, Arial, sans-serif; font-size:11px; text-align:left; background-color:#8686C2; z-index:2; }
#navLogo {margin:15px 0 0 15px;}
#navMain ul {position:relative; top:10px; left:140px;}
#navMain ul li { display:inline; margin-right:40px; }

div.hot { height:15px; width:auto; padding:2px 5px 0px 5px; background-color:null;}
.trigger ul.menu { display:none; width:700px; }
.trigger:hover ul.menu, .trigger:hover div.hot{ display: inline; cursor:pointer; background-color:#6B6B9B;}

div.mit1, div.mit2, div.mit3{height:15px; width:auto; padding:2px 5px 0px 5px; background-color:null; margin-left:60px; text-align:center; float:left; }

.hot {color:#FFF;float:left; }
a.hot:link {text-decoration:none; color:#FFF; }
a.hot:visited {text-decoration:none; color:#FFF; }
div.mit1:hover, div.mit2:hover, div.mit3:hover { text-decoration:none; background-color:#6B6B9B;/*color:#000;*/}
a.hot:active {text-decoration:none; color:#FFF; }

</style>
</head>
<body>
<div id="page-background"></div>
<div id="navMain">
<ul>
<li class="trigger">
<div class="hot"><a href="index.php" class="hot" title="">MAIN TITLE</a></div>
<ul class="menu">
<li><a href="zz_tester.php" class="hot" title=""><div class="mit1">SUB TITLE</div></a></li>
<li><a href="#" class="hot" title=""><div class="mit2">ANOTHER TITLE</div></a></li>
<li><a href="#" class="hot" title=""><div class="mit3">LAST ITEM</div></a></li>
</ul>
</li>
</ul>
</div>
<div id="container"> </div>
</body>
</html>

remp

11-05-2010, 08:52 PM

try removing the 'div' to just leave it as a class

.mit3:hover { text-decoration:none; background-color:#6B6B9B;/*color:#000;*/}

ggalan

11-05-2010, 09:06 PM

thank you for the response
just tried it

.mit1:hover, .mit2:hover, .mit3:hover { text-decoration:none; background-color:#6B6B9B;/*color:#000;*/}

but still on chrome, safari and IE doessnt work
IE is all broken, but i guess it must be my code

Nile

11-05-2010, 09:23 PM

Instead, on the div do:

onmouseover="this.style.backgroundColor='#6b6b9n'" onmouseout=""this.style.backgroundColor='#000'""

ggalan

11-05-2010, 09:37 PM

i would need the dive to asign the width X height parameter

tried this, but it didnt do anything

<!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" xml:lang="en" lang="en">
<head>
<style>
#navMain { margin:0 auto; width:950px; height:150px; font-family:Helvetica, Arial, sans-serif; font-size:11px; text-align:left; background-color:#8686C2; z-index:2; }
#navLogo {margin:15px 0 0 15px;}
#navMain ul {position:relative; top:10px; left:140px;}
#navMain ul li { display:inline; margin-right:40px; }

div.hot { height:15px; width:auto; padding:2px 5px 0px 5px; background-color:null;}
.trigger ul.menu { display:none; width:700px; }
.trigger:hover ul.menu, .trigger:hover div.hot{ display: inline; cursor:pointer; background-color:#6B6B9B;}

div.mit1, div.mit2, div.mit3{height:15px; width:auto; padding:2px 5px 0px 5px; background-color:null; margin-left:60px; text-align:center; float:left; }

.hot {color:#FFF;float:left; }
a.hot:link {text-decoration:none; color:#FFF; }
a.hot:visited {text-decoration:none; color:#FFF; }

a.hot:active {text-decoration:none; color:#FFF; }

</style>
</head>
<body>
<div id="page-background"></div>
<div id="navMain">
<ul>
<li class="trigger">
<div ><a href="index.php" class="hot" title="">MAIN TITLE</a></div>
<ul class="menu">
<li><a href="zz_tester.php" class="hot" onmouseover="mit1.style.background-color='#6b6b9n'" onmouseout="mit1.style.background-color='null'"><div id="mit1">SUB TITLE</div></a></li>
<li><a href="#" class="hot" title=""><div class="mit2">ANOTHER TITLE</div></a></li>
<li><a href="#" class="hot" title=""><div class="mit3">LAST ITEM</div></a></li>
</ul>
</li>
</ul>
</div>
<div id="container"> </div>
</body>
</html>

Nile

11-05-2010, 09:39 PM

I'm confused - are you trying to make a hover on a link work, or on a div. For a link, you would simple do:

a:hover {

}

For a div, use the javascript

remp

11-05-2010, 09:46 PM

Nile is right, try this:

.mit3 a:hover { text-decoration:none; background-color:#6B6B9B;/*color:#000;*/}

ggalan

11-05-2010, 09:49 PM

the original code works on firefox but not on the others, adding an 'a' didnt do anything for chrome

Nile

11-05-2010, 09:50 PM

Please answer my question. Do you want to add a hover effect to a link, or to a div?

ggalan

11-05-2010, 09:58 PM

to a div

Nile

11-05-2010, 10:04 PM

So: When you hover over DIV A, it makes DIV A font color change?

ggalan

11-05-2010, 10:07 PM

font color and background. the background is the most important
if it wasnt for that i would have kept it 'a' link

Nile

11-05-2010, 10:12 PM

On your div mit1, apply this:

onmouseover="this.style.backgroundColor='#6b6b9n'" onmouseout=""this.style.backgroundColor='#000'""

Don't apply it to the link

ggalan

11-05-2010, 10:19 PM

hmmm, same result on chrome and others
firefox works

<!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" xml:lang="en" lang="en">
<head>
<style>
#navMain { margin:0 auto; width:950px; height:150px; font-family:Helvetica, Arial, sans-serif; font-size:11px; text-align:left; background-color:#8686C2; z-index:2; }
#navLogo {margin:15px 0 0 15px;}
#navMain ul {position:relative; top:10px; left:140px;}
#navMain ul li { display:inline; margin-right:40px; }

div.hot { height:15px; width:auto; padding:2px 5px 0px 5px; background-color:null;}
.trigger ul.menu { display:none; width:700px; }
.trigger:hover ul.menu, .trigger:hover div.hot{ display: inline; cursor:pointer; background-color:#6B6B9B;}

div.mit1, div.mit2, div.mit3{height:15px; width:auto; padding:2px 5px 0px 5px; background-color:null; margin-left:60px; text-align:center; float:left; }

.hot {color:#FFF;float:left; }
a.hot:link {text-decoration:none; color:#FFF; }
a.hot:visited {text-decoration:none; color:#FFF; }

a.hot:active {text-decoration:none; color:#FFF; }

</style>
</head>
<body>
<div id="page-background"></div>
<div id="navMain">
<ul>
<li class="trigger">
<div class="hot" ><a href="index.php" class="hot" title="">MAIN TITLE</a></div>
<ul class="menu">
<li><a href="#" class="hot" title=""><div class="mit1" onmouseover="this.style.backgroundColor='#6b6b9n'" onmouseout=""this.style.backgroundColor='#000'"">SUB TITLE</div></a></li>
<li><a href="#" class="hot" title=""><div class="mit2" onmouseover="this.style.backgroundColor='#6b6b9n'" onmouseout=""this.style.backgroundColor='#000'"">ANOTHER TITLE</div></a></li>
<li><a href="#" class="hot" title=""><div class="mit3" onmouseover="this.style.backgroundColor='#6b6b9n'" onmouseout=""this.style.backgroundColor='#000'"">LAST ITEM</div></a></li>
</ul>
</li>
</ul>
</div>
<div id="container"> </div>
</body>
</html>

Nile

11-05-2010, 10:44 PM

I see that its not working. Is there a reason that we cant get rid of the <div>, and just apply the hover effect to the link instead? I'm almost positive it is invalid to put a div inside a link.

ggalan

11-05-2010, 10:56 PM

ok, then how would i set the background width and height?

remp

11-06-2010, 04:34 AM

Instead, you can try adding the onmouseover event on the div and adding the link inside the div and set the height and width for the div... as Nile mentioned, i also believe its not possible to add a div inside link, so just try the other way around.

jscheuer1

11-06-2010, 03:49 PM

I haven't really been following this thread.

In the abstract though, all you need to do to set a link's (an anchor link a tag's) background and height is to make it display: block;. It doesn't need a container for that. If you want it to appear 'inline' for the layout, it probably will have to be floated. That's a little complicated, but usually not much.

Nile

11-06-2010, 11:50 PM

An example:

<style type="text/css">
a:link, a:visited {
display: block;
height: 200px;
width: 500px;
background: grey;
color: white;
text-decoration: none;
}
a:hover {
background: black;
}
</style>
<a href="#">Home</a><a href="#">About</a>