css - 为自定义 Kendo UI 网格按钮添加 "active"颜色

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

您的问题是您在 .k-grid-details 中使用了 background + background-color但是当你悬停并激活 .k-grid-details 时，只需执行 background-color，因此 background(包含 linear-gradient(#003399, #000167)) 保持悬停和事件状态。所以你必须加入 background-color 和 background，使之简写，像这样:

背景:#039 线性渐变(#003399，#000167)

后台速记可以看更多HERE

然后在背景色之后的悬停和事件状态下，为线性渐变设置 none，如下所示:

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

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