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

Code:

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

Code:

<!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><!-- end of container -->
</body>
</html>

**remp** · 11-05-2010, 08:52 PM

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

Code:

.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

Code:

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

Code:

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

Code:

<!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><!-- end of container -->
</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:

Code:

a:hover { 

}

For a div, use the javascript

**remp** · 11-05-2010, 09:46 PM

Nile is right, try this:

Code:

.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

Thread: hover change bg div color

Thread Tools

Search Thread

hover change bg div color

Bookmarks

Bookmarks

Posting Permissions