Results 1 to 2 of 2

Thread: Change all table rows and top color on mouseover

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Nov 2000
    Location
    Minnesota
    Posts
    830

    Change all table rows and top color on mouseover

    I have a table with 2 rows. The first row has a colored background. I want to change the border and cell seperator of the rows plus the top row background color onmouseover to a different color.

    Has anyone done this before?

    This is my code I have so far:
    HTML Code:
    <html>
    <head>
    <style type="text/css">
    table.tableborderOrange {
     border: 1px solid Orange;
    }
    
    table.tableborderGrey {
     border: 1px solid grey;
    }
    
    .Related {color: #000000; font-weight: bold; font-family: "Century Gothic"; font-size: 11px; }
    </style>
    </head>
    <body>
    <table width="129" border="0" cellpadding="0" cellspacing="0" class="tableborderGrey" onMouseOver="this.className='tableborderOrange';" onMouseOut="this.className='tableborderGrey';">
    	<tr>
    		<td bgcolor="#999999"><div align="center" class="Related">TITLE</div></td>
    	</tr>
    	<tr>
    		<td ><div align="center"><a href="#"><img src="/images/ImageLibrary/image.jpg" border="0"></a></div></td>
    	</tr>
    </table>
    </body>
    </html>

  2. #2
    VB6, XHTML & CSS hobbyist Merri's Avatar
    Join Date
    Oct 2002
    Location
    Finland
    Posts
    6,654

    Re: Change all table rows and top color on mouseover

    HTML Code:
    <html>
    	<head>
    		<title>Quick :hover CSS sample</title>
    		<style type="text/css"><!--
    body { background : black; color : white; }
    table { width : 100%; }
    table td {
    	background : #BBB;
    	border : 1px solid #DDD;
    	color : black;
    }
    table tr:hover td {
    	border : 1px solid orange;
    }
    		//--></style>
    		<!--[if lt IE 7]><style type="text/css">
    body { behavior : url('csshover.htc'); }
    		</style><![endif]-->
    	</head>
    	<body>
    		<table cellspacing="0">
    			<tr>
    				<td>Row 1</td>
    				<td>Row 2</td>
    			</tr>
    			<tr>
    				<td>Row 1</td>
    				<td>Row 2</td>
    			</tr>
    		</table>
    	</body>
    </html>
    Internet Explorer 6 and 5 require an extra csshover.htc file which you can download from Peterned's whatever:hover page. It enables the :hover CSS selector in IE.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width