Hover over entire row with CSS - not just single cells

jimoblak · Feb 3, 2003

I can see how CSS can be used to change the color of individual cells within the <TD> tags when the mouse hovers over a link. Can this be done on a full row of a few columns? ...so that when you hover over a cell in column 1, columns 2 & 3 are also highlighted?

Here is what I have so far:

<html><head><title>Row Hover</title>
<STYLE type="text/css" media="screen">
.Menu { font : bold }
.Menu a,.Menu a:link,.Menu a:active,.Menu a:visited { display : block; background : #FFFFFF; color : teal; text-decoration : none; }
.Menu a:hover { background : #F6DEA2; color : black; cursor : pointer; text-decoration : none; }
</style>

</head><body>

<table>
<tr>
<td class=Menu><a href=

http://www.yahoo.com>Yahoo.com</a></td>

<td class=Menu><a href=

http://www.yahoo.com>Search

Engine</a></td>
<td class=Menu><a href=

http://www.yahoo.com>5

stars</a></td>
</tr>
</table>

</body></html>

Targol · Feb 3, 2003

Did you try to apply the "Menu" class to the TR tag instead of the TD tags ??? Water is not bad as long as it stays out human body ;-)

jimoblak · Feb 3, 2003

The problem is not necessarily in the CSS tag. I can put it with the <TR> tag. The problem is that <A HREF> cannot span across cells (as far as I know).

jimoblak · Feb 3, 2003

I think I found the answer at:

http://forums.devshed.com/archive/1/2002/11/2/46662

Targol · Feb 3, 2003

I did that once using a behavior (*.htc) file. My problem is I don't know if it's IE only or cross browser. by the way, I give you what I done, use it if you want :

1 ) add the "List" class to all your TRs
2 ) define the "List" class this way

Code:

.List {
	behavior : url(./Style/Lists.htc);
	color : #286DA4;
	text-align : left;
  	font-family : Verdana,sans-serif;
  	font-Size : 12px;
  	font-weight : bold;
}

3 ) create a text file that you'll save in Style dir with this name : Lists.htc

Code:

<PUBLIC:COMPONENT >
   <PUBLIC:ATTACH EVENT=&quot;onmouseover&quot; ONEVENT=&quot;Hilite()&quot; />
   <PUBLIC:ATTACH EVENT=&quot;onmouseout&quot;  ONEVENT=&quot;Restore()&quot;  />

   <SCRIPT LANGUAGE=&quot;vbscript&quot;>
    Const NORMAL_BG_COLOR = &quot;#F7F7F7&quot;
    Const NORMAL_TXT_COLOR = &quot;#286DA4&quot;
    Const SELECT_TXT_COLOR = &quot;#F7F7F7&quot;
    Const HILITE_TXT_COLOR = &quot;#FF1010&quot;

 
    '********************************************************************
    function Hilite()
    '********************************************************************
      Style.color  = HILITE_TXT_COLOR
    end Function

    '********************************************************************
    function Restore()
    '********************************************************************
      if ucase(Style.background) = NORMAL_BG_COLOR Then
        Style.color  = NORMAL_TXT_COLOR
      else
        Style.color  = SELECT_TXT_COLOR
      end if
    end Function

   </SCRIPT>
</PUBLIC:COMPONENT>

Water is not bad as long as it stays out human body ;-)

jimoblak · Feb 3, 2003

The following seems to work in IE/Mozilla:

<tr onmouseover = \"this.style.backgroundColor = '#F6DEA2';\" onmouseout = \"this.style.backgroundColor = 'white';\">

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hover over entire row with CSS - not just single cells

jimoblak

Instructor

Targol

Technical User

jimoblak

Instructor

jimoblak

Instructor

Targol

Technical User

jimoblak

Instructor

Similar threads

Part and Inventory Search

Sponsor