使用 CSS 为 GridView 行添加悬停效果

• 下载演示应用程序 - 2.88 KB

引言

上周，我学习了一种仅使用纯 CSS（无需任何 JavaScript 代码）为 HTML 表格的行应用悬停效果的技术。 太棒了，不是吗？ 在此之前，我一直使用 JavaScript 来实现此目的，就像我在之前的文章 类似 Hotmail 的 GridView 鼠标悬停和鼠标移开效果 中所做的那样。 我认为在 GridView 上实现此技术以在 GridView 行上创建悬停效果可能会很有趣。 因此，我快速创建了一个示例应用程序并决定分享它。 以下是使用 CSS 将悬停效果应用于 GridView 行的此技术的实施细节。

GridView HTML 代码

本文中 GridView 的 HTML 代码将如下所示

<asp:GridView ID="gvHover" BackColor="WhiteSmoke" runat="server" AutoGenerateColumns="False"
              GridLines="Vertical" CssClass="grid-view" OnRowCreated="gvHover_RowCreated">
   <Columns>
      <asp:BoundField HeaderText="n" DataField="n">
         <HeaderStyle Width="25px" />
         <ItemStyle Width="25px" />
      </asp:BoundField>
      <asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">
         <HeaderStyle Width="150px" />
         <ItemStyle Width="150px" />
      </asp:BoundField>
      <asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">
         <HeaderStyle Width="150px" />
         <ItemStyle Width="150px" />
      </asp:BoundField>
   </Columns>
</asp:GridView>

设置 GridView 的样式

为了设置 Gridview 的样式，请为其附加一个 CSS 类，如下所示

<asp:GridView ... CssClass="grid-view" ... > ... </asp:GridView>

设置 GridView 的标题行、普通行和交替行的样式

为了设置 GridWiew 的标题、普通和交替行的样式，请通过 GridView 的 RowCreated 事件将 CSS 类附加到这些行，如下所示

//Add CSS class on header row.
if (e.Row.RowType == DataControlRowType.Header)
   e.Row.CssClass = "header";

//Add CSS class on normal row.
if (e.Row.RowType == DataControlRowType.DataRow && 
          e.Row.RowState == DataControlRowState.Normal)
   e.Row.CssClass = "normal";

//Add CSS class on alternate row.
if (e.Row.RowType == DataControlRowType.DataRow && 
          e.Row.RowState == DataControlRowState.Alternate)
   e.Row.CssClass = "alternate";

CSS 类

以下是上面用于设置 GridView 及其标题、普通和交替行样式的 CSS 类

.grid-view
{
   padding: 0;
   margin: 0;
   border: 1px solid #333;
   font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
   font-size: 0.9em;
}

.grid-view tr.header
{
   color: white;
   background-color: #FF5600;
   height: 25px;
   vertical-align: middle;
   text-align: center;
   font-weight: bold;
}

.grid-view tr.normal
{
   color: black;
   background-color: #FDC64E;
   height: 25px;
   vertical-align: middle;
   text-align: center;
}

.grid-view tr.alternate
{
   color: black;
   background-color: #D59200;
   height: 25px;
   vertical-align: middle;
   text-align: center;
}

向 GridView 行添加悬停效果

最后，为了将悬停效果应用于 GridView 行，使用了以下 CSS

.grid-view tr.normal:hover, .grid-view tr.alternate:hover
{
   background-color: white;
   color: black;
   font-weight: bold;
}

请注意，悬停效果仅应用于普通行和交替行，而不应用于标题行。 您还可以为普通行和交替行分别使用不同的配色方案，以实现悬停效果。

使用 CSS 类

将所有对应的 CSS 类放在样式表中，并在网页的 head 部分中给出其引用，如下所示

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

结论

这就是这项技术的全部内容。 只需下载示例应用程序并享受 CSS 的乐趣！ 我已经在各种浏览器上测试过此应用程序，它工作正常。 以下是这些浏览器的列表