实现jqxGrid列头悬停时鼠标指针变为手型

我碰到过类似的jqxGrid列头光标配置问题，你遇到的情况大概率是因为列头的文本标签子元素没有继承父级的cursor样式，或者它本身被赋予了默认的cursor属性，覆盖了你设置的父级容器样式。

你之前的CSS只针对列头的外层容器，但jqxGrid会把列头的名称放在一个独立的子元素里（比如.jqx-grid-column-header-label，不同版本的jqxGrid可能略有差异），这个子元素才是鼠标悬停在文字上时实际触发的目标元素。

这里提供两个可行的解决方案：

方案一：精准定位列头文本元素 #

直接给列头文字对应的子元素添加hover样式，先通过浏览器开发者工具（F12）确认文本元素的类名（通常是.jqx-grid-column-header-label），然后写入CSS：

#jqxWidget .jqx-grid-column-header .jqx-grid-column-header-label:hover,
#jqxWidget .jqx-grid-columngroup-header .jqx-grid-column-header-label:hover {
    cursor: pointer;
}

方案二：强制所有子元素继承指针样式 #

如果不想纠结内部DOM结构，可以让父级的cursor样式强制传递给所有子元素，确保整个列头区域（包括文字）都能触发指针光标：

#jqxWidget .jqx-grid-columngroup-header:hover,
#jqxWidget .jqx-grid-column-header:hover,
#jqxWidget .jqx-widget-header:hover,
#jqxWidget .jqx-grid-columngroup-header:hover *,
#jqxWidget .jqx-grid-column-header:hover *,
#jqxWidget .jqx-widget-header:hover * {
    cursor: pointer !important;
}

测试一下，这样鼠标悬停在列头名称上时就会显示指针样式了。

内容的提问来源于stack exchange，提问作者evanesco