how to remove salesforce hover highlight on pageblock table.

Question

I am changing the pageblocktable cell colors dynamically based on value but due to salesforce standard style on pageblocktable removing my color.

please suggest.

Answer 1

This really depends on your Visualforce code and what you're checking against. For each column you can use a formula to determine whether or not a class gets used. For example:

<style>
  .green {
    background: green;
  }
</style>

<apex:pageBlock>
  <apex:pageBlockTable value="{!myTable}" var="t">
    <apex:column styleClass={!IF(t.DateField__c > TODAY()), 'green', '')}     value="{!t.DateField__c}" />
  </apex:pageBlockTable>
</apex:pageBlock>

You've not specified much, but the trick is here:

{!IF(t.DateField__c > TODAY), 'green', '')}

In other words for this example, if DateField__c is greater than today, return green. green is a CSS class and the formula is within the styleClass parameter. So, if the date is indeed greater than today, it'll render something like this:

<apex:column styleClass="green" [...]

Edit

To answer your second question, in your CSS you'd need something like this:

.green:hover {
    colour: darkgreen;
}

Salesforce will have some standard styling and :hover will be one of them. You'll want to override/cascade over that by using your own class.

Alternatively, you could do:

.green {
  background: green !important;
}

Although I'd avoid using this personally.

Answer 2

The background hover is a feature of pageBlockTable. If you want to remove it entirely, use dataTable instead. You'll also lose the formatting, including borders, colors, etc that salesforce uses by default.

If you just want to keep the green color, wrap your text in an inner element:

<apex:column headerValue="Column Name">
    <span style="display: inline-block; width: 100%; background-color: {!row.bgcolor}">
        {!row.dateValue}
    </span>
</apex:column>

Feel free to adjust as you need to.