How to change the color of datagridview row on hover?

Question

I want the color to change when the user hovers on datagridview row. I am only able to get the rows that are gray to change to blue when the user hover on them. However, when I try to get it to work for them with rows the footer also becomes blue when the user hovers on it which is not what I want. How can I fix this? Thank you for your help.

Here is my aspx

<asp:GridView ID="editingGrid" runat="server" AutoGenerateColumns="false" ShowFooter="false" DataKeyNames="componente_id"
            ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gridView_PageIndexChanging" OnRowDataBound = "OnRowDataBound" OnSelectedIndexChanged = "OnSelectedIndexChanged" 
            CellPadding="3" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
        <PagerSettings  Mode="Numeric" /> 
        <Columns>
            <asp:TemplateField HeaderText="Familia">
                <ItemTemplate>
                    <asp:Label Text='<%# Eval("familia") %>' runat="server" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtfamilie" Text='<%# Eval("familia") %>' runat="server" />
                </EditItemTemplate>
            </asp:TemplateField>        

            </Columns>
        </asp:GridView>

Here is my CSS and HTML:

:root {
  --main-color: #1b9bff;
}

.mGrid {
  width: 100%;
  background-color: #fff;
  margin: 5px 0 10px 0;
  border: solid 1px #525252;
  border-collapse: collapse;
}

.mGrid td {
  padding: 2px;
  border: solid 1px #c1c1c1;
  color: #000;
}

.mGrid th {
  padding: 4px 2px;
  color: #fff;
  background: #424242 url(/images/grd_head.png) repeat-x top;
  border-left: solid 1px #525252;
  font-size: 0.9em;
}

.mGrid th:hover {
  color: #1b9bff;
}

.mGrid .alt {
  background: #c4c9d2 url(/images/rd_alt.png) repeat-x top;
}

.mGrid .alt:hover {
  background-color: #1b9bff;
}

.mGrid .pgr {
  background: #424242 url(/images/grd_pgr.png) repeat-x top;
}

.mGrid .pgr table {
  margin: 5px 0;
}

.mGrid .pgr td {
  border-width: 0;
  padding: 0 6px;
  border-left: solid 1px #666;
  font-weight: bold;
  color: #fff;
  line-height: 12px;
}

.mGrid .pgr a {
  color: #666;
  text-decoration: none;
}

.mGrid .pgr a:hover {
  color: #000;
  text-decoration: none;
}

<table class="mGrid" cellspacing="0" cellpadding="3" id="PageContent_editingGrid" style="border-collapse:collapse;">
  <tr>
    <th scope="col">Familia</th>
    <th scope="col">Marca</th>
    <th scope="col">Tipo</th>
    <th scope="col">Designacion</th>
    <th scope="col">Referencia</th>
  </tr>
  <tr title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Select$0&#39;)">
    <td>
      <span>circuito integrado</span>
    </td>
    <td>
      <span id="PageContent_editingGrid_myText_0">Kemet</span>
    </td>
    <td>
      <span>electronics</span>
    </td>
    <td>
      <span>capteur</span>
    </td>
    <td>
      <span>calle mayor</span>
    </td>
  </tr>
  <tr class="alt" title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Select$0&#39;)">
    <td>
      <span>circuito integrado</span>
    </td>
    <td>
      <span id="PageContent_editingGrid_myText_0">Kemet</span>
    </td>
    <td>
      <span>electronics</span>
    </td>
    <td>
      <span>capteur</span>
    </td>
    <td>
      <span>calle mayor</span>
    </td>
  </tr>
  <tr class="pgr">
    <td colspan="5">
      <table>
        <tr>
          <td><span>1</span></td>
          <td><a href="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Page$2&#39;)">2</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

If you want all rows of data (not header row or footer pager row) to turn blue on hover you can add this style to your stylesheet:

.mGrid > tbody > tr:not(.pgr):hover {
  background-color: #1b9bff;
}

The .mGrid tbody > tr part will select all rows in the body of the table (so the header column in the <thead> will not be affected), the :not(.pgr) part will exclude the footer/pager row, and the :hover will only style it on hover.

:root {
  --main-color: #1b9bff;
}

.mGrid {
  width: 100%;
  background-color: #fff;
  margin: 5px 0 10px 0;
  border: solid 1px #525252;
  border-collapse: collapse;
}

.mGrid td {
  padding: 2px;
  border: solid 1px #c1c1c1;
  color: #000;
}

.mGrid th {
  padding: 4px 2px;
  color: #fff;
  background: #424242 url(/images/grd_head.png) repeat-x top;
  border-left: solid 1px #525252;
  font-size: 0.9em;
}

.mGrid th:hover {
  color: #1b9bff;
}

.mGrid .alt {
  background: #c4c9d2 url(/images/rd_alt.png) repeat-x top;
}

.mGrid > tbody > tr:not(.pgr):hover {
  background-color: #1b9bff;
}

.mGrid .pgr {
  background: #424242 url(/images/grd_pgr.png) repeat-x top;
}

.mGrid .pgr table {
  margin: 5px 0;
}

.mGrid .pgr td {
  border-width: 0;
  padding: 0 6px;
  border-left: solid 1px #666;
  font-weight: bold;
  color: #fff;
  line-height: 12px;
}

.mGrid .pgr a {
  color: #666;
  text-decoration: none;
}

.mGrid .pgr a:hover {
  color: #000;
  text-decoration: none;
}

<table class="mGrid" cellspacing="0" cellpadding="3" id="PageContent_editingGrid" style="border-collapse:collapse;">
  <tr>
    <th scope="col">Familia</th>
    <th scope="col">Marca</th>
    <th scope="col">Tipo</th>
    <th scope="col">Designacion</th>
    <th scope="col">Referencia</th>
  </tr>
  <tr title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Select$0&#39;)">
    <td>
      <span>circuito integrado</span>
    </td>
    <td>
      <span id="PageContent_editingGrid_myText_0">Kemet</span>
    </td>
    <td>
      <span>electronics</span>
    </td>
    <td>
      <span>capteur</span>
    </td>
    <td>
      <span>calle mayor</span>
    </td>
  </tr>
  <tr class="alt" title="Haga clic para seleccionar esta fila." onclick="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Select$0&#39;)">
    <td>
      <span>circuito integrado</span>
    </td>
    <td>
      <span id="PageContent_editingGrid_myText_0">Kemet</span>
    </td>
    <td>
      <span>electronics</span>
    </td>
    <td>
      <span>capteur</span>
    </td>
    <td>
      <span>calle mayor</span>
    </td>
  </tr>
  <tr class="pgr">
    <td colspan="5">
      <table>
        <tr>
          <td><span>1</span></td>
          <td><a href="javascript:__doPostBack(&#39;ctl00$PageContent$editingGrid&#39;,&#39;Page$2&#39;)">2</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

Right now you are only changing the font color of the individual cell in the header, because you are applying the hover style to:

.mGrid th:hover{...}

if you want the same style to be applied to cells in each row you just need to add td:hover in to the mix:

.mGrid th:hover, .mGrid td:hover {...}

Note: you need to separate them by comma and apply the full css style selector for the td. But this will only apply to the cell of each row, not to the entire row. So only the cell will be affected.

To get the entire row involved you need to add another selector. In this example I am changing the background color:

.mGrid tr:hover {
    background-color: #eeeeee;
}

If I try to add font color changes it won't work, even if I add the !important flag - still only the background color changes.

.mGrid tr:hover {
    color: #1b9bff !important;
    background-color: #eeeeee;
}

This is because the tr has a background color property, but no foreground (font) color.

So what you need to do is to make sure that you apply the style to the nested child elements like when you hover over the row, like this...

.mGrid tr:hover td {
    color: #1b9bff;
    background-color: #eeeeee;
}

Voila... your row background and font colors should now change on hover. (and you don't even need the !important flag)