How to Restore List Row Highlighting when using Alternating Row Colors

Description

When you enable alternating background colors for rows in a List, the effect that changes the background color when the mouse hovers over a list row may be lost. This article describes how to add the hover effect to the rows with alternating colors.

Discussion

When the user hovers a mouse over a List row, a highlighting class is applied when using the built-in Alpha Anywhere web themes. When you define an alternating row color, the background color defined in the hover class is not applied when the mouse hovers over a row. This is because of how CSS rules work.

To restore the background color on hover, you must define the background color using the !important directive. This CSS rule can be defined in a CSS class stored with the List control. For example:

.listHover {
    background-color: #5faee3 !important;
}

This class can be added to the List item hover class name property in the List's settings. Note that when you add a CSS class to this property, it overwrites the default classes assigned to the List row on hover. You must manually include the system default class name if you want to include the styling rules from that class in addition to any new rules you add with your own CSS. For example:

listItemHover listHover
listItemHover is the default hover class name in Alpha-based web themes
listItemHover is the default hover class name in Alpha-based web themes

Try it out!

Click here to download an example component.