Question

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

预期行为：在鼠标悬停时，加号图标的颜色变为白色，点击后，它会显示警告信息。

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

网格标题中的按钮：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类的大多数元素还为background-image定义了background-color。确切地说，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类。

Free-jqGrid - 标题点击按钮仅适用于中心

1 个答案: