如何在悬停时更改datagridview行的颜色？

Question

当用户将鼠标悬停在datagridview行上时，我希望颜色发生变化。当用户将鼠标悬停在灰色行上时，我只能将其更改为蓝色。但是，当我尝试使其适用于行时，当用户将鼠标悬停在页脚上时，页脚也会变为蓝色，这不是我想要的。我怎样才能解决这个问题？谢谢您的帮助。

这是我的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>

这是我的CSS和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

现在，您仅更改标题中单个单元格的字体颜色，因为您将鼠标悬停样式应用于：

.mGrid th:hover{...}

如果您希望将相同的样式应用于每行的单元格，则只需将td：hover添加到混合中：

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

注意：您需要用逗号分隔它们，并为td应用完整的CSS样式选择器。但这仅适用于每一行的单元格，不适用于整个行。所以只有细胞会受到影响。

要获取涉及的整个行，您需要添加另一个选择器。在此示例中，我将更改背景色：

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

如果我尝试添加字体颜色更改，即使添加！important标志，也将无法使用-仍然只有背景颜色更改。

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

这是因为tr具有背景颜色属性，但没有前景色（字体）颜色。

因此，您需要做的是确保将样式应用于嵌套的子元素，例如当您将鼠标悬停在行上时，就像这样……

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

Voila ...您的行背景和字体颜色现在应该在悬停时更改。 （而且您甚至都不需要！important标志）

Answer 2

如果您希望所有数据行（而不是标题行或页脚分页器行）在悬停时变为蓝色，可以将此样式添加到样式表中：

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

.mGrid tbody > tr部分将选择表主体中的所有行（因此<thead>中的标题列将不受影响），:not(.pgr)部分将排除页脚/寻呼机行，而: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>