Change TD on hover

[jluerken]

Hi,

I want to change to background image (or color) of the first alternating fields within my board on hover so that when a user moves his mouse above the field the background changes.

I know that this can work like this in CSS
td a:hover {
color: #ffffff;
background-color: #5778e1;
}

but how can I do this for the first alternating field?
Which code I have to enter that this will work?

Kind regards

[tubedogg]

Enter that code in the "Extra CSS Attributes" box for "First Alternating Color" under Style Manager > style > Main CSS.

[jluerken]

Enter that code in the "Extra CSS Attributes" box for "First Alternating Color" under Style Manager > style > Main CSS.

This did not work for me. Can you give me a hint?

[tubedogg]

On further investigation, the code you provided will not actually change the background color of the cell, just the link in the cell.

If you want to do a rollover for the whole cell, that's a bit more advanced.

First edit your headinclude template and add this before </head>:

<script language="JavaScript">
<!--
function setPointer(theRow, thePointerColor)
{
    if (thePointerColor == '' || typeof(theRow.style) == 'undefined') {
        return false;
    }
    if (typeof(document.getElementsByTagName) != 'undefined') {
        var theCells = theRow.getElementsByTagName('td');
    }
    else if (typeof(theRow.cells) != 'undefined') {
        var theCells = theRow.cells;
    }
    else {
        return false;
    }

    var rowCellsCnt  = theCells.length;
    for (var c = 0; c < rowCellsCnt; c++) {
        theCells[c].style.backgroundColor = thePointerColor;
    }

    return true;
} // end of the 'setPointer()' function
//-->
</script>

Next, create a Replacement (Admin CP > Styles & Templates > Replacement Variable Manager > style name > Add New) with the following info:
Search For Text: <td class="alt1"
Replace With Text: <td class="alt1" onmouseover="setPointer(this, '#5778E1')" onmouseout="setPointer(this, '#FFFFFF')"
Replace the colors in the onmouseover and onmouseout with the colors you want.