change background on hover

**d-machine** · 10-10-2009, 01:21 PM

Hi,

I have a long table and I want to change the tr's background onmouse hover.

I know how to do it with CSS but it doesn't work well on some browsers, so I'm looking for a JS solution.

Thanks!

**vwphillips** · 10-10-2009, 01:49 PM

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>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/
var Lst=false;

function HighLight(c){
 var evt=window.event||arguments.callee.caller.arguments[0];
 if (Lst){
  Lst.style.backgroundColor='transparent';
 }
 var obj=window.event?evt.srcElement:evt.target;
 if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
 while (obj.parentNode&&obj.nodeName.toUpperCase()!='TR'){
  obj=obj.parentNode;
 }
 if (obj.nodeName.toUpperCase()=='TR'){
  Lst=obj;
  Lst.style.backgroundColor=c;
 }
}
/*]]>*/
</script></head>

<body>
<table width="100" border="1" onmouseover="HighLight('red');">
  <tr>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
  </tr>
</table>
</body>

</html>

**d-machine** · 10-10-2009, 03:13 PM

Hi thank you very much!
Is it possible to make it change the backgorund of all the td's in the row on hover
instead of changing the tr's background?
Since in my table my tr's already have bbackground and I want to keep it.
My table contains 7 cell in each line.

**Troy III** · 10-10-2009, 08:53 PM

Originally Posted by d-machine

Hi thank you very much!
Is it possible to make it change the backgorund of all the td's in the row on hover
instead of changing the tr's background?
Since in my table my tr's already have bbackground and I want to keep it.
My table contains 7 cell in each line.

Not sure I understand exactly what you mean, but I presume you want something like this:

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>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/
var Lst=false;

function HighLight(e,c){
 var e=e||event;
 if (Lst){
  Lst.style.backgroundColor='';
 }
 var obj=e.srcElement||e.target
   Lst=obj; 
   if(Lst.tagName.match(/td/i)){
   Lst.style.backgroundColor=c;}
 }

/*]]>*/
</script>
</head>

<body>
<table width="100" border="1" onmouseover="HighLight(event, 'red');">
  <tr>
   <td>&nbsp;</td><td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td><td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td><td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td><td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

I've just modified vwphillips code a bit...

**vwphillips** · 10-11-2009, 08:24 AM

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>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/
var Lst=false;

function HighLight(c){
 var evt=window.event||arguments.callee.caller.arguments[0];
 if (Lst){
  for (var z0=0;z0<Lst.length;z0++){
   Lst[z0][0].style.backgroundColor=Lst[z0][1];
  }
 }
 var obj=window.event?evt.srcElement:evt.target;
 if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
 while (obj.parentNode&&obj.nodeName.toUpperCase()!='TR'){
  obj=obj.parentNode;
 }
 if (obj.nodeName.toUpperCase()=='TR'){
  Lst=[];
  var tds=obj.cells;
  for (var z0=0;z0<tds.length;z0++){
   Lst.push([tds[z0],zxcSV(tds[z0],'background-Color')]);
   tds[z0].style.backgroundColor=c;
  }
 }
}

function zxcSV(obj,par){
 if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
 return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}


/*]]>*/
</script></head>

<body>
<table width="100" border="1" onmouseover="HighLight('red');">
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td style="background-Color:blue;">&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td style="background-Color:green;">&nbsp;</td>
  </tr>
</table>
</body>

</html>

Thread: change background on hover

Thread Tools

Search Thread

change background on hover

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions