Forums

brianatlarge

Website: http://www.studentseatfree.com/search.php

So I'm trying to have this entry have a rollover color but I can't figure out how to get it to go back to the default color after you mouse out. It stays the color of the mouse rollover color. Suggestions?

HTML:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>

	<head>
		<title>SEF Search Results</title>
		<meta http-equiv=\"Content-type\" content=\"text/html; charset=UTF-8\">
		<link rel=StyleSheet href=\"main_style.css\" type=\"text/css\">
		<script src=\"jquery.js\" type=\"text/javascript\"></script>
  <script type=\"text/javascript\"> 
  $(document).ready(function()
  {
	//for div
	 $(\"table.contentbox:even\").css(\"background-color\", \"#f2fef2\");
	  $(\"table.contentbox:odd\").css(\"background-color\", \"#daf2c8\");
  });
  </script>

	</head>
	<body>
	<div class=\"everything\">
		
	<div class=\"searchbox\"></div>
	
	<form class=\"searchformbox\" action=\"search.php?search_query=&amp;sort_type=restaurant_name\" method=GET>
		Sort by: <select name=\"sort_type\">
			<option value=restaurant_name selected>Restaurant Name
			<option value=restaurant_type>Restaurant Type
			<option value=discount_type>Discount Type
		</select>

		<input type=submit value=\"Sort\">
	
		<input type=text name=search_query value=\"\">
		<input type=submit value=\"Search\">
	</form>
	
	<div class=\"logobox\"></div>
	<div class=\"adtopbox\"></div>
	<div class=\"refine\">
		<div>Showing all coupons</div>

	</div>
	<div class=\"adbox\"></div>
	<div class=\"skyscraper\"></div>
	<div class=\"results\">
	&lt;&nbsp;1 &gt;	
	&nbsp;<a href=search.php>All Listings</a><br>
	</div>
	
	
	
	<br>

	
		<table class=\"contentbox\" border=0 cellspacing=\"5\" onmouseover=\"this.style.backgroundColor='#fee393'; this.style.cursor='pointer';\" onclick=\"window.location.href=''\" onmouseout=\"\">
			<tr>
				<td class=\"restname\" colspan=3 width=\"400px\">Caliente Grille</td>
				<td><a target=\"_new\" href=\"http://maps.google.com/maps?f=q&hl=en&q=Caliente+Grille%2C+3319+Hardy+St%2C+Hattiesburg%2C+MS+39402&ie=UTF8&iwloc=addr\">View map</a></td>
			</tr>
			<tr>
				<td width=\"100px\"><img src=\"images/wendys.jpg\"</img></td>
				<td width=\"10px\">&nbsp;</td>

				<td class=\"description\" width=\"300px\">2 for $10 on Tuesdays</td>
			</tr>
		</table>

	<br>
	
		<table class=\"contentbox\" border=0 cellspacing=\"5\" onmouseover=\"this.style.backgroundColor='#fee393'; this.style.cursor='pointer';\" onclick=\"window.location.href=''\" onmouseout=\"\">
			<tr>
				<td class=\"restname\" colspan=3 width=\"400px\">Grand China Buffet</td>

				<td><a target=\"_new\" href=\"http://maps.google.com/maps?f=q&hl=en&q=Grand+China+Buffet%2C+560+Weathersby+Rd%2C+Hattiesburg%2C+MS+39402&ie=UTF8&iwloc=addr\">View map</a></td>
			</tr>
			<tr>
				<td width=\"100px\"><img src=\"images/wendys.jpg\"</img></td>
				<td width=\"10px\">&nbsp;</td>
				<td class=\"description\" width=\"300px\">10% Discount</td>
			</tr>
		</table>

	<br>
	
		<table class=\"contentbox\" border=0 cellspacing=\"5\" onmouseover=\"this.style.backgroundColor='#fee393'; this.style.cursor='pointer';\" onclick=\"window.location.href=''\" onmouseout=\"\">
			<tr>
				<td class=\"restname\" colspan=3 width=\"400px\">Little Tokyo</td>
				<td><a target=\"_new\" href=\"http://maps.google.com/maps?f=q&hl=en&q=Little+Tokyo%2C+3800+Hardy+St%2C+Hattiesburg%2C+MS+39402&ie=UTF8&iwloc=addr\">View map</a></td>
			</tr>
			<tr>

				<td width=\"100px\"><img src=\"images/wendys.jpg\"</img></td>
				<td width=\"10px\">&nbsp;</td>
				<td class=\"description\" width=\"300px\">10% Discount</td>
			</tr>
		</table>

	<br>
	
		<table class=\"contentbox\" border=0 cellspacing=\"5\" onmouseover=\"this.style.backgroundColor='#fee393'; this.style.cursor='pointer';\" onclick=\"window.location.href=''\" onmouseout=\"\">
			<tr>

				<td class=\"restname\" colspan=3 width=\"400px\">Spicy Pickle</td>
				<td><a target=\"_new\" href=\"http://maps.google.com/maps?f=q&hl=en&q=Spicy+Pickle%2C+6156+US+Highway+98%2C+Hattiesburg%2C+MS+39402&ie=UTF8&iwloc=addr\">View map</a></td>
			</tr>
			<tr>
				<td width=\"100px\"><img src=\"images/wendys.jpg\"</img></td>
				<td width=\"10px\">&nbsp;</td>
				<td class=\"description\" width=\"300px\">10% Discount</td>

			</tr>
		</table>

		
	
	<div class=\"clear\"></div>

	<div id=\"footer\">
				<span id=\"footer_text\">
					&copy; Copyright 2008 StuckPixel Studio LLC &amp; Jaree Marketing LLC<br>

					All Rights Reserved<br>
					Hattiesburg, MS
				</span>
				<div style=\"float: right;\">
					<p>
						<a href=\"http://validator.w3.org/check?uri=referer\">
							<img src=\"http://www.w3.org/Icons/valid-xhtml10\" alt=\"Valid XHTML 1.0 Strict\" height=\"31\" width=\"88\">
						</a>
					</p>

				</div>
			</div>

	</div>
	<script type=\"text/javascript\">
var gaJsHost = ((\"https:\" == document.location.protocol) ? \"https://ssl.\" : \"http://www.\");
document.write(unescape(\"%3Cscript src='\" + gaJsHost + \"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E\"));
</script>
<script type=\"text/javascript\">
var pageTracker = _gat._getTracker(\"UA-5202505-1\");
pageTracker._trackPageview();
</script>
	</body>
</html>

CSS:

* { margin: 0; padding: 0; }

body
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;
}

.everything
{
background:url(images/bg.jpg);
background-position: center top;
background-repeat:repeat-y;
margin:0px auto;
width:999px;
display:block;
}

.searchbox
{
background:url(images/topgreen.jpg);
background-repeat:no-repeat;
height:30px;
width:999px;
}

.searchformbox
{
margin-top:-27px;
margin-left:30px;
}

.logobox
{
background:url(images/newlogo.jpg);
width:175px;
min-height:135px;
height:135px;
float:left;
display:inline;
margin-left:20px;
margin-top:10px;
}

.adtopbox
{
background:url(images/adtopholder.jpg);
width:730px;
min-height:90px;
height:90px;
margin-left:200px;
margin-top:20px;
}

.adbox
{
background:url(images/adboxholder.jpg);
width:300px;
min-height:250px;
height:250px;
float:right;
margin-right:70px;
margin-top:15px;
}

.skyscraper
{
background:url(images/skyscraperad.jpg);
width:160px;
min-height:600px;
height:600px;
float:right;
margin-right:-223px;
margin-top:294px;
}

.contentbox
{
width:560px;
min-height:100px;
padding: 5px;
background-position: left top;
margin-left:30px;
}

.description
{font-size:16px;
}

.results 
{
margin-left:30px;
}

.resultspadding 
{
padding:5px;
}

.restname
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:20px;
font-weight:bold;
}

.floatleft {
float: left;
margin: 0px 10px 10px 0px;
}

.refine
{
background-color:#eeeeee;
min-height:25px;
width:890px;
padding:5px;
margin-left:30px;
margin-top:40px;
background-position: center top;

}

/*Footer*/

#footer {
padding:10px 0px 70px 10px;
color:#0c0c0c;
width:951px;
background-color:#daf2c8;
font-size:9px;
text-align: left;
line-height:12px;
margin:35px auto 0px;
}

#footer img {
float:left;
margin-right:10px;
}

#footer span {
display:block;
float:left;
width:300px;
}

#footer a {
color:#9e8292;
text-decoration:none;
}

img {border:none}

div.clear { clear: both; }

.boxlink
{
color:#000000;
text-decoration:none;
}

noahgelman

&#46;contentbox&#58;hover { background-color&#58;#fee393;}

Put that in your css, get rid of the onmouseover and onmouseout events.

treehouse : what would you like to learn today?

Forums

onmouseout - how do I get it to go back to the default color