Question

我正在使用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渲染网格时我可以做些什么？

Answer 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;
}

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

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

1 个答案: