CSS for DataTable hover

[bobd]

I'd like to highlight the current row when the mouse hovers over the row. I've tried several approaches, including the following:

Code: Select all

tr.ui-datatable-even:hover, tr.ui-datatable-even:active,
tr.ui-datatable-odd:hover, tr.ui-datatable-odd:active {
	background-color: #78BCFF;
}
.ui-datatable .ui-datatable-data tr.ui-state-hover,
.ui-datatable .ui-datatable-data tr.ui-state-active {
	background-color: #78BCFF;
}
.ui-datatable tbody tr.ui-selected td {
	background-color: #78BCFF;
}
.ui-datatable tbody tr.ui-state-highlight td {
	background-color: #78BCFF;
}

What am I doing wrong? Thanks.

[porthos]

Try:

Code: Select all

.ui-datatable tr.ui-datatable-even:hover, .ui-datatable tr.ui-datatable-odd:hover {
    background: #78BCFF;
}

This is a css question. Not primefaces.

[bobd]

Thanks for the response; it seems to work. And it's not just a CSS question, because CSS classes defined and attached by PrimeFaces are generated by the component (and are not under my complete control). Think themes.

[kukeltje]

But you can easily see what classes pf adds, so it still is 'just' acss issue