使光标转向 .jqxgrid 列标题上的指针

Posted 2023-05-08

【中文标题】使光标转向 .jqxgrid 列标题上的指针

【英文标题】：Make cursor turn to pointer on .jqxgrid column headers

【发布时间】：2018-08-31 02:43:37

【问题描述】：

我正在使用 jqxgrid，当悬停在列的标题名称上时，我需要将光标更改为指针。我尝试在 .jqx-grid-columngroup-header、.jqx-grid-column-header 和 .jqx-widget-header 上使用 CSS。

#jqxWidget .jqx-grid-columngroup-header:hover,
.jqx-grid-column-header:hover,
.jqx-widget-header:hover 
    cursor: pointer;

所有这一切似乎只是让光标变成围绕标题的指针，而不是标题本身。我希望指针悬停在标题的文字上时出现，而不是它周围的空间。

我检查了网页上的元素，它告诉我：

<span style="text-overflow: ellipsis; cursor: default;">Column Name</span>

显然，跨度上的 CSS 覆盖了我所做的任何事情并造成了我的问题。我试图搜索我的 CSS 文件，但找不到它。

谁能帮我解决这个问题？

编辑：我也在标记 javascript。当网格使用 javascript 渲染时，也许我可以做些什么？

【参考方案1】：

在尝试了我能想到的所有方法之后，我想出了一个笨拙的解决方案。

在 jqx 网格本身中，我为每个列标题标签添加了一个新类，该类将光标更改为指针。

在每个列标题的网格中：

 columns: [ text: "Header Name", 
             datafield: "Data", 
             width: 160, 
             menu: false, 
             rendered: function (header) 
                          header.html("<span class='jqxheaderlabel'>Header Name</span>") 
                       
           ]

在我的 CSS 中：

.jqxheaderlabel 
cursor: pointer !important;

如果有人能提出更清洁的解决方案，将不胜感激。