HTML Table Row CSS Hove Over Effect

This is a very simple HTML table with hove over effect but always ask again and again. The color of table rows will be changed when mouse hove over them. This effect can easily be achieved with CSS.

The following is the final effect:

The HTML Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Table Row Hove Over Effect</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="500" border="1" cellpadding="5" cellspacing="0" id="test">
  <caption>
    My Table
  </caption>
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>
</body>
</html>

The CSS Code:

tr:hover {
    background: #FC0;
}

The above example can be modified to produce more interesting effect.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>