Question

我正在尝试将多彩的自定义按钮添加到Kendo UI网格中。

除了活动状态外，它的效果很好。背景颜色不会被覆盖。

HTML：

<a class="k-button k-button-icontext k-grid-details" href="#">
    <span class=" "></span>
 Details</a>

CSS：

.k-grid-details {
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    width: 50px;
    border-color: #003399;
    background-color: #003399;
    background: linear-gradient(#003399, #000167);
}

    .k-grid-details:hover {
        border-color: #003399;
        color: #fff;
        background-color: #003399;
    }

    .k-grid-details .k-state-active,
    .k-grid-details:active {
        background-color: #003399;
    }

可能缺少什么？

Answer 1

看看这个FIDDLE

您的问题是您在background中使用background-color + .k-grid-details 但是当您悬停并激活.k-grid-details时，只需执行background-color，因此background（包含linear-gradient(#003399, #000167)）会保持悬停和活动状态。所以你必须加入背景颜色和背景，简化它，如下所示：

<强> background: #039 linear-gradient(#003399, #000167)

您可以看到更多背景速记 HERE

然后在你的悬停和活动状态刚好在背景颜色之后，你为线性渐变设置为none，如下所示：

.k-grid-details:hover {
        background: #ff0 none;
}

.k-grid-details:active {
        background: #f00 none;
}

为自定义Kendo UI网格按钮添加“活动”颜色

1 个答案: