Disabling Mouse-hover-color-change for the apex:pageBlockTable

Question

I am displaying a PageBlockTable with 12 records from a Custom object. And each <apex:column> has its own color code rendered based on the value.

<apex:column headerValue="Field One" width="4%"
             styleClass="{!CASE(a.Field1__c, 'Red', 'red', 'Green', 'green', 'Yellow', 'yellow', 'white')}">
    <apex:outputText >{!a.Field1__c}</apex:outputText>
</apex:column>

But, when my mouse pointer hover on any of the rows, it disables all the colors and show a plain white row. But, I want the row to stay how it rendered(different color codes to each table data). Is there any Boolean variable I need to make false or other attributes to add/change?

Answer 1

You can't "disable" it, but apparently you can countermand it. I've come up with two potential solutions.

!important

Use an important style.

<style>
.red, .red.highlight {
    background: red !important;
}
</style>

This will override the Salesforce style sheet.

Toggle "highlight"

You can also remove the class as its added:

<apex:pageBlockTable onrowmouseover="this.classList.remove('highlight')" ...

onRowMouseOver is called after the library does its stuff, and so you'll undo the highlight that it does. There's no noticeable flicker because browsers delay rendering until the end of a JavaScript execution cycle.