Member Avatar for dwlamb_001

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.

  • 4 Contributors
  • 6 Replies
  • 303 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by riz4u123

Dani AI

Generated

Short summary and practical path forward: correctly tracked the failure down to the site reset interfering with row hover in IE, and other replies (notably and ) point to browser differences (older IE behaves differently). The root causes to consider are stylesheet cascade/order and older-IE bugs around the shorthand background rule used by many resets. The safest, broadly compatible strategy is to (a) diagnose which rule actually wins in the dev tools, (b) avoid relying on old browsers’ inconsistent handling of row-level shorthand background resets, and (c) provide a small, robust fallback that does not depend on the browser supporting :hover on table rows.

Quick checklist for diagnosis (use the browser dev tools):

  • Confirm the reset file is linked before your custom stylesheet; verify the order shown in the inspector.
  • Check the computed style on a table cell/row to see which background rule is winning.
  • Look for a reset rule that sets a shorthand background on rows (that can override background-color).
  • Test whether increasing specificity or moving the hover rule after the reset fixes it without hacks.

Robust fix (apply a class to rows on mouse events, style cells from that class). Example CSS + plain JS fallback (works in IE6–modern):

/* apply hover styling by class (cells inherit the color) */
.rowHover td {
  background-color: #f3f3f3;
}
<script>
(function(){
  var rows = document.getElementsByTagName('tr');
  for (var i=0; i<rows.length; i++){
    rows[i].onmouseover = function(){
      if (this.className.indexOf('rowHover') === -1) this.className += ' rowHover';
    };
    rows[i].onmouseout = function(){
      this.className = this.className.replace(/\browHover\b/,'').replace(/\s+/g,' ').replace(/^\s+|\s+$/g,'');
    };
  }
})();
</script>

Notes and cautions: apply the JS only when necessary (use an IE-only conditional or feature-detect if avoiding extra work for modern browsers). For very large tables prefer event delegation at the table level for performance. Finally, keep keyboard accessibility in mind: mirror visual focus states for keyboard users (focus outlines or a focused-row class) so hover effects aren’t the only cue.

Recommended Answers

All 6 Replies

Member Avatar for almostbob 
<!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

Edited by almostbob because: n/a
Member Avatar for Romil797

IE6 is mildy out of date, but

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

Member Avatar for almostbob

Thanks

Member Avatar for dwlamb_001

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

Member Avatar for almostbob

transparent blue|red|green
is transparent
its a fault in IE handling of transparent in reset.css file discussed in other forums too

dunno if the fix works,
I ha already edited reset.css and changed transparent to inherit for my sites, Thats how my layout works

Member Avatar for riz4u123

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.