css - 如何在悬停时更改 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>

标签： cssasp.netdatagridview

Answer 1

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

.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>