代码之家 › 专栏 › 技术社区 › J.C

我希望在用户将鼠标悬停在datagridview行上时更改颜色

datagridview asp.net css

0

J.C · 技术社区 · 6 年前

我希望在用户将鼠标悬停在datagridview行上时更改颜色。我只能让灰色的行在用户悬停时变为蓝色。然而,当我试图让它为他们的工作与行的页脚也变成蓝色时,用户在它不是我想要的。我怎样才能解决这个问题?谢谢你的帮助。

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

0 回复 | 直到 6 年前

1

zgood 6 年前

如果希望所有数据行(而不是页眉行或页脚页导航行)在悬停时都变为蓝色,则可以将此样式添加到样式表中:

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

这个 .mGrid tbody > tr part将选择表体中的所有行(因此 <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>

2

1

Gregor 6 年前

现在您只更改标题中单个单元格的字体颜色,因为您将悬停样式应用于:

.mGrid th:hover{...}

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

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

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

如果我试图添加字体颜色的变化,它不会工作,即使我添加了!重要标志-仍然只有背景颜色改变。

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

这是因为tr有一个background color属性,但没有前景色(字体)。

因此,您需要做的是确保将样式应用于嵌套的子元素,就像将鼠标悬停在行上时一样,如下所示。。。

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

瞧。。。您的行背景和字体颜色现在应该改变悬停。)你甚至不需要这个!重要标志)