Free-jqGrid

Question

我有一个 free-jqGrid 如下所示。它有一个带有 + 图标的按钮。

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

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

网格标题中的按钮：Fiddle 1
仅动态按钮：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 classes 的大多数元素除了 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 选项并从 [=37= 中删除 ui-jqgrid-caption class ] 的网格。

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

Free-jqGrid – Button on caption click works only at center

jqgrid