Highlighting list view tables (when the user hovers over them)

  • Article

Here is a quick tip to achive the highlighing effect below (if the user hovers over a row of the table it is highlighted) which is very easy to achive. This works well to help users read data in SharePoint lists.

One Two
Three Four
Five Six
Seven Eight

To use this effect you should first remove the alternate shading of list view cells, in the HTML for your table remove the following lines:

   <xsl:if test="position() mod 2 = 1">
<xsl:attribute name="class">ms-alternating</xsl:attribute>
</xsl:if>

These lines apply the "ms-alternating" style to alternating rows of the a table, you can of course define and apply your own style if you want to create alternating colours in your table but for this example we will remove the effect. All you need to do now to apply our highlighting effect is add the following inside each table row <TR> tag:

onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';"

For example, the source code for the above table is:

<table width="80%" border="2px">
<tr onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';"><td style="width: 155px">One</td><td>Two</td></tr>
...

</table>

We are using the JAVA OnMouseOver event handler embedded directly into the HTML itself.

Comments