Free-jqGrid – 标题点击按钮仅在中心有效

Question

我有一个免费的 jqGrid，如下所示。它有一个带有+ 图标的按钮。

预期行为：鼠标悬停时加号图标的颜色变为白色，单击时会显示警告消息。

但此功能仅在鼠标指向按钮中心时才有效。如果我从浏览器的右边缘移动鼠标并到达按钮的右下角，则不会发生视觉变化——点击时什么也不会发生。但是，如果我在一个简单的动态按钮（没有网格）上执行此操作，如第二小提琴所示，它可以正常工作。

1. 网格标题中的按钮：Fiddle 1
2. 单独的动态按钮：Fiddle 2

如何在 free-jqgrid 中修复/解决这个问题？

注意：我使用的是 Google Chrome 版本 58。

字幕脚本

var htmlButtonElement = '<button id="btnAddProvider" type="button" class="btn btn-info toolbar-button" title="Add Provider" style="float:left;">'+
              '<span id="spanAddProvider" class="glyphicon glyphicon-plus" style="pointer-events: none;"></span>'+
          '</button>'


        function getGridCaption() {
            return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" +
            "<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" +
           "<div style='float:right;width:550px;  padding-bottom:20px;'>" +
                 "<div class='btn-group' style='float:right; padding-top:1px;'> " +
                  htmlButtonElement+
                "</div>" +
                "<input type='text' class='form-control' id='filter' placeholder='Search'  style='width:250px; height:30px; float:right; ' />" +
            " </div>" +
            "</div><div class='ui-helper-clearfix'></div>";
        }

更新：

根据 Oleg 的回答修复：Fiddle 3

Answer 1

在我看来，您的问题更多关于 jQuery UI CSS，您将其用作免费 jqGrid。 jQuery UI 类的大多数元素除了background-color 之外还定义了background-image。确切地说，jQuery UI 使用background 来定义background-image、background-color 和其他一些background-xxx CSS 属性。因此，您应该使用background: silver 而不是background-color: silver 或继续使用background-color: silver，但另外添加background-image: none。您可以另外定义:hover 规则（如.toolbar-button:hover）来定义悬停状态下按钮的CSS 属性。例如，演示https://jsfiddle.net/OlegKi/x59xx4n1/3/ 使用以下属性

.toolbar-button {
    background-color: silver;
    background-image: none;
    color: darkblue;
}
.toolbar-button:hover {
    background-color: green;
    color: yellow;
}

更新：另一个演示 https://jsfiddle.net/OlegKi/x59xx4n1/5/ 使用 hidegrid: false 选项并从网格标题中删除 ui-jqgrid-caption 类。