I've been doing some research on how to change the color of a table row background when hovering.

Can anyone lend support how to make this possible in IE for tables? I've found solutions like whatever:hover but they only work for <li> tags.

It can be done for it exists in phpmyadmin, a browser based software for working on MySQL databases locally or remotely. Poking around that with Debugbar and I can't decipher enough to determine what Javascript or CSS solution they are using.

<!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">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
tr:hover { background:blue; }
</style>
</head>
<body>
<table>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
</table>
</body>
</html>

works for me in opera ff safari ie7 ie8 dont have a testbed of ie6 any more

IE6 is mildy out of date, but

<style>
tr:hover {background-color: anycolor};
</style>

Thanks

Lo and behold it's not a browser compatibility issue as first thought but one of a different nature. This problem is only prevalent in IE. All other browsers show this attribute without fail. As your example demonstrated, tr:hover is supported in IE 7 & 8 (I tried 6 and it was a no go) but tr:hover syntax was not working in my css stylesheet or if I include it as a style in the header area. It led me to do some further debugging and this is what I found.

I am using a css reset stylesheet available from meyerweb that is loaded before my stylesheet. By removing the reset stylesheet and reloading the web page, the tr:hover now works.

This is the code from the reset stylesheet:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

So the question becomes why would IE not accept the new directive?

tr:hover{background: #ffff7f;}

or

tr:hover{background-color: #ffff7f;}

With reset.css and my stylesheet loaded this is the style reported in Debugbar:

/*--------------
   Inherited from TR
------------- */
/* Rule N°14 from css/index.css */
TR:hover {
	BACKGROUND-COLOR: #ffff7f
}
/* Rule N°72 from css/reset.css */
:focus {
	outline: 0
}
/* Rule N°60 from css/reset.css */
TR {
	BORDER-TOP-WIDTH: 0px;
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	BORDER-LEFT-WIDTH: 0px;
	FONT-SIZE: 100%;
	BACKGROUND: none transparent scroll repeat 0% 0%;
	BORDER-BOTTOM-WIDTH: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	VERTICAL-ALIGN: baseline;
	PADDING-TOP: 0px;
	BORDER-RIGHT-WIDTH: 0px;
	outline: 0
}

Style as computed reported by Debugbar:

BORDER-LEFT-WIDTH: 0px;
WIDTH: 35%;
FONT-SIZE: 240;
OVERFLOW: visible;
BORDER-COLLAPSE: collapse;
PADDING-TOP: 0.25em;
VERTICAL-ALIGN: middle;
BORDER-BOTTOM: 1px solid navy;
BORDER-BOTTOM-WIDTH: 1px;
FONT-FAMILY: Verdana;
BORDER-TOP-WIDTH: 0px;
TABLE-LAYOUT: fixed;
BACKGROUND-COLOR: transparent;
LINE-HEIGHT: 18pt;
outline: 0;
PADDING-RIGHT: 0.25em;
BORDER-RIGHT-WIDTH: 0px;
PADDING-LEFT: 0.25em;
COLOR: #333;
TEXT-ALIGN: left;
MARGIN: auto;
PADDING-BOTTOM: 0.25em;

Input is much appreciated. Thanks for taking the time.

<!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">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
tr:hover { background:blue; }
</style>
</head>
<body>
<table>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
</table>
</body>
</html>

works for me in opera ff safari ie7 ie8 dont have a testbed of ie6 any more

table tr:hover td{ background-color:#eee;}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.