I am struggling to add a background color to a panelgrid within a datatable when a hover event occurs. Despite writing the necessary code and CSS, nothing seems to work. Any suggestions on how to address this issue?
<p:dataTable id="movementsTable" var="mov" value="#{movementsBacking.movements}" selectionMode="single" selection="#{movementsBacking.selectedMovement}" rowKey="#{mov.id}"
styleClass="nopadding " rowStyleClass="roteiroTable" style="margin: 0;" emptyMessage="#{text['list.empty']}" >
<p:ajax event="rowSelect" update=":#{cc.clientId}:movementPanel" oncomplete="PF('movementPanelVar').show()" listener="#{movementsBacking.onSelect}"/>
<p:column headerText="#{text['tasksbacking.tabRot']}" sortBy="#{mov.dataSent}">
<p:panelGrid id="panelGridSelect" rendered="#{mov.isTreated()}" styleClass="borderless">
<p:row>
<p:column>
<h:outputLabel value="#{text['tasksbacking.roteiro.num']}" style="margin-right:5px;"/>
<h:outputText id="num" value="#{mov.number}"/>
</p:column>
<p:column>
<h:outputLabel value="#{text['tasksbacking.roteiro.data']}" style="margin-right:5px;"/>
<h:outputText value="#{mov.dataSent}">
<f:convertDateTime pattern="dd-MM-yyyy"/>
</h:outputText>
</p:column>
</p:row>
<p:row>
...
(remaining content of the snippet)
...
The accompanying CSS:
.roteiroTable, .roteiroTable th, .roteiroTable td {
background-color: #F1F1F1 !important;
}
.nopadding, .nopadding th, .nopadding td {
padding: 0 !important;
}
.borderless, .borderless tr, .borderless td {
border: none !important;
}