How to give border on kendo grid row hover

Question

I created a grid with Kendo and I want to show the border when my cursor is on a grid row (hovering).

I tried this:

.k-grid > table > tbody > tr:hover,
.k-grid-content > table > tbody > tr:hover
{
   background-color: transparent;
   border:1px solid #000
}

but it didn't work for me. Is there a way to do it?

Answer 1

You can try to add outline on tr:hover and play with content and header to match it up.

.k-grid tbody tr:hover {
    background-color: #ebebeb;
    outline: #4CAF50 solid 2px;
}

.k-grid-content {
    padding: 1px;
}

.k-grid-header-wrap {
    padding: 1px;
}

For example: Grid tr outline