Change the hover color for sortable table headers?

App Development
1

I’m a CSS newbie, and I’ve been able to figure out how to change almost every element, but the hover style for table headers is eluding me no matter what I try.

Anybody already figured this out that can help me out?

2 
.table thead th.sortable:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}
1 Like
3

Thanks Tim! Appreciate it. Now I’m stuck on the little sort arrows (fa-caret-down and fa-caret-up). Nothing I do will change their color and size. I was able to hide the box that is normally around it, but that arrow remains elusive.

4

Here ya go. Change the color to whatever you want.

.table-wrap>table th.sortable:hover span.table-only-sort {
    display: inline-block;
    color: red;
}

Other options here…

.table-wrap>table th span.table-only-sort {
    position: absolute;
    right: 16px;
    display: none;
    width: 21px;
    text-align: center;
    height: 21px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
5

You’re my hero. Thank you so much,. Go enjoy your weekend! :joy: :upside_down_face:

1 Like
6

Halloween weekend!

Happy to help :+1:

1 Like