MVC Grid - How to change the selected row hover background color?

[Randy]

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>

 

[Tsvetomir]

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

[Randy]

Tsvetomir - Thank you for the response, but this does not work. I still get the dark blue background color when I hover over a row that has been selected. 

[Randy]

I should clarify that I still get the dark blue background color when the row is selected, in edit mode and hovered over. If I stop hovering over the selected, edited row, the background color is the color I desire. Hovering is the issue.

[Tsvetomir]

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

[Randy]

Thank you. This now works!