SFDC：標準テーブルマウスオーバーCSSサンプル

MouseOverTableSample.page

<apex:page standardController="Account" recordSetVar="accounts" id="page">
    <style>
        .customTable tr.dataRow.highlight td {
            background-color: red !important;
        }
    </style>
    <div id="vf-page">
        <apex:form id="form">
            <apex:pageBlock id="block">
                <apex:pageBlockSection columns="1" id="blockSection">
                    <apex:outputPanel styleClass="customTable">
                        <apex:pageBlockTable value="{!accounts}" var="item" id="blockTable">
                            <apex:column style="background-color: blue; color: white;" headerValue="{!$ObjectType.Account.Fields.Name.Label}" >
                                <apex:outputField value="{!item.Name}" />
                            </apex:column>
                            <apex:column headerValue="{!$ObjectType.Account.Fields.AccountNumber.Label}" >
                                <apex:outputField value="{!item.AccountNumber}" />
                            </apex:column>
                        </apex:pageBlockTable>
                    </apex:outputPanel>
                    <apex:pageBlockTable value="{!accounts}" var="item">
                            <apex:column headerValue="{!$ObjectType.Account.Fields.Name.Label}" >
                                <apex:outputField value="{!item.Name}" />
                            </apex:column>
                            <apex:column headerValue="{!$ObjectType.Account.Fields.AccountNumber.Label}" >
                                <apex:outputField value="{!item.AccountNumber}" />
                            </apex:column>
                        </apex:pageBlockTable>
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:form>
    </div>
</apex:page>