I have an MVC grid with inline editing set and the user is able to select an entire row. I've managed to change the hover background color of a non-selected row by changing some CSS. When the user selects a row I'm also able to change the background color of the selected row. However, what I cannot seem to change is the hover color of the selected row. It's a deep blue and I'm unable to change it.
This is the CSS code I've created:
.k-grid .k-state-selected {<br> background-color: #C4FAEC;<br> color: #000000;<br>}<br>
.k-grid .k-state-selected:hover {<br> background-color: #C4FAEC;<br> color: #000000;<br>}<br>
.k-grid td.k-state-selected:hover, .k-grid tr:hover {<br> color: #000000;<br> background-color: #C4FAEC;<br>}<br>
5 Answers, 1 is accepted
Hi Randy,
If you would like to apply the hover styles over a selected row, you would have to make a strong CSS rule (also known as CSS specificity). Changing the hover color over a row could be done as follows:
<style>
html .k-grid tr.k-state-selected:hover {
background: coral;
}
html .k-grid tr.k-state-selected.k-alt:hover {
background: coral;
}
</style>Give this a try and let me know in case you encounter any issues.
Kind regards,
Tsvetomir
Progress Telerik
Rank 1
Rank 1
Hi Randy,
Thank you for specifying the exact scenario that you are willing to achieve. Can you try applying the following CSS rule and see how it works out for you:
<style>
.k-grid .k-state-selected {
background-color: #C4FAEC;
color: #000000;
}
.k-grid .k-state-selected:hover {
background-color: #C4FAEC;
color: #000000;
}
.k-grid tr:hover,
.k-grid td.k-state-selected:hover,
.k-grid tr.k-state-selected:hover td
{
color: #000000;
background-color: #C4FAEC;
}
</style>Looking forward to your reply.
Best regards,
Tsvetomir
Progress Telerik
Rank 1