Home > WebEOC > Admin Guide > Board Building Tips > Highlight Table Rows on Hover

Highlight Table Rows on Hover

Table of contents
No headers

You can use CSS without any JavaScript to enable the highlighting of a table row upon hover. Via the use of the pseudo class :hover, you can add this effect to any HTML element you choose.

In this example, the feature is added to a table row using the stylesheet rule: tr:hover { background-color: #ffff99; }. The code, used all together, would like something like the following:

<style style="text/css">
.hoverTable{
    width:100%;
    border-collapse:collapse;
}
.hoverTable td{
    padding:7px;
    border:#4e95f4 1px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
    background: #b8d1f3;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
    background-color: #ffff99;
}
</style>
<table class="hoverTable">
    <tr>
        <td>Text 1A</td>
        <td>Text 1B</td>
        <td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td>
        <td>Text 2B</td>
        <td>Text 2C</td>
    </tr>
    <tr>
        <td>Text 3A</td>
        <td>Text 3B</td>
        <td>Text 3C</td>
    </tr>
</table>

The agency template class defined, which was set up by default for newly-created boards, takes priority over the above code. Thus, if the above code is implemented but does not work, the agency template is likely the cause. This can be changed by removing the agency template class and replacing it with the hoverTable class created above.

Change the code from:

<table class="webeoc-datagrid" cellpadding="0" cellspacing="0">

to:

<table class="hoverTable" cellpadding="0" cellspacing="0">
You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.