Title of the questions sums it up quite nicely (kind of). How do I remove the hover effect of a column in jqGrid, plus the mouse-over hand, if I have jQuery themes enabled?
This change must not affect and other grids that may be on the same page, or system wide by editing the css associated with jqGrid.
I answered the same question here, but because the question was "cumulative" question with multiple questions it can be difficult be found on the stackoverflow.
jqGrid use jQuery.hover to bind mouseenter
and mouseleave
to the <th>
elements which are column headers (see the line of code). So one need just unbind the events after the grid is created. To do this one can use the code like
$($("#gridId")[0].grid.hDiv).find(".ui-jqgrid-labels th.ui-th-column")
.unbind("mouseenter")
.unbind("mouseleave");
The CSS class
.ui-jqgrid .ui-jqgrid-bdiv .ui-state-hover
, you can override them or remove the offending portions.
If you only want to apply this change to one grid you can
#GridName .ui-state-hover {.....