鼠标悬停在 Gridview ASP.net 中使用 CSS

Question

这可能是一件非常简单的事情，但我对 CSS 完全陌生。我只想能够在gridview中的行上具有鼠标悬停效果，如果悬停在行上，则更改行的颜色。我很好奇我的 CSS 文件是否在正确的位置？我的 Gridview.CSS 是否应该与我的 gridview.aspx 位于同一个文件夹中（我假设是这样？）。

这是我的 CSS 文件：

.Gridview tr.normal
 {
   background-color:white;
 }

 .Gridview tr.highlight
  {
     background-color:yellow;
  }

这是我尝试实现它的方式： 在 .aspx 文件中：

 <asp:GridView ID="MsgInbox" runat="server" ....OnRowCreated="Gridview_RowCreated" CssClass = "Gridview">

而在后面的C#代码中：

    protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "highlight";
        }
    }

我知道我的 C# 中一定遗漏了一些非常简单的东西。任何帮助，将不胜感激！谢谢！

Answer 1

我从另一个 answer 窃取了我的部分解决方案，因此我的样式会一次性影响所有网格视图。

将此CssClass="GridView" 添加到您的 asp:GridView 标记中。

<asp:GridView ID="grdLongID" runat="server" CssClass="GridView" CellPadding="4" ForeColor="#333333" GridLines="None" AllowSorting="true" OnSorting="grdLongID_Sorting" RowStyle-HorizontalAlign="center" AutoGenerateColumns="False" Width="100%">

然后在您的 style.css 中，您可以执行以下操作：

table.GridView th {
  border-bottom: 1px solid #ED7A0A;
  text-decoration: none;
}

table.GridView tr:hover {
  background-color: #fabf85;
}

关键是:hover 伪类。

Answer 2

首先您使用此代码设置行样式，在 GridView 内部，我称之为.row

<RowStyle CssClass="row"  />

然后你使用这个css来改变背景颜色，或者当鼠标移动时你喜欢什么。

tr.row
{
    background-color:#fff;
}


tr.row td
{ 
}

tr.row:hover td, 
tr.row.over td
{ 
    background-color: #eee;
}

这里的诀窍是，因为 GridView 呈现为表格，所以我在样式中添加了 td 和 tr 以访问表格行上的鼠标。

因为还有另一种行样式AlternatingRowStyle，如果你喜欢用它，你可以用同样的方法简单地多做一个样式。

Answer 3

我是这样实现的：

按照本教程更改鼠标悬停时突出显示的行：

http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx

这也解释了处理行选择的代码。我的 gridview 有交替的行颜色。为了恢复您刚刚悬停的行的原始颜色，请在 mouseover 中为原始 backgroundColor 创建一个自定义属性并在 mouseOut 上恢复它，如下所示：

row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor;this.style.cursor='hand';this.style.backgroundColor='#ffccff';";

row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor=this.originalstyle;";

Answer 4

您可以使用 RowCreated 创建悬停效果，因为这需要回发。你应该在你的 CSS 中使用 hover 伪类。像这样的

.Gridview tr:hover
{
  background-color:blue;
  color:white;
}

Gridview css 类应用于您的 Gridview 的位置

Answer 5

这就是我在项目中的做法

CSS：

.tdonhover { background-color:#d9d9d9 !important; }

<script type="text/javascript">
        $(document).ready(function () {
         $('td').hover(function () {
                $('tr').each(function () {
                    $(this).removeClass('tdonhover');
                });
                $(this).parent().addClass('tdonhover');
            });
          });

    </script>

Default.aspx 页面：此页面包含gridview控件。

               ` <asp:GridView ID="GridView1" runat="server" CellPadding="4" Width="940px" CssClass="gvClass gvalign" BorderColor="#E0DCD0" BorderStyle="Solid" BorderWidth="1px"
                       ForeColor="#333333" GridLines="None" >
                        <Columns>
                        <asp:TemplateField HeaderText="Srno" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="40">
                            <ItemTemplate>
                                <%# Container.DataItemIndex+1 %>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
                    <RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#A86E07" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />
                </asp:GridView>`

使用

<RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
<AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />

您可以设置交替行背景颜色和字体颜色

Answer 6

这就是这么简单的事情。

在头部添加 CSS

#MainContent_gvDevice tr:Hover
{  
    background-color:#F6F6F6;
}

在这里而不是gvDevice 输入您的gridview id。

Answer 7

使用 OnRowCreated 处理鼠标悬停的更好方法

protected void RowCreated_report(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='yellow'");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;");
                e.Row.Attributes.Add("style", "cursor:pointer;");
            }
}

Answer 8

我认为我有迄今为止实施的最短和最简单的解决方案。无需编辑后面的代码或 id/类名称。您需要进行的唯一编辑是添加此 CSS：

tr[class^='dxgvDataRow']:hover td{ 
    background-color: #272727 !important;
}

Answer 9

 protected void grdDis_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {


            #region to highlight the grid view row 
            e.Row.Attributes.Add("onmouseover", "this.originalcolor=this.style.backgroundColor;" + " this.style.backgroundColor='#FDCB0A';");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalcolor;");
            #endregion
}
}

Answer 10

这适用于 Gridview 中的列 单元格悬停颜色，带有 ToolTip 和 ForeColor

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[2].Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';this.style.backgroundColor='aqua'";
        e.Row.Cells[2].Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor='white'";
        e.Row.Cells[2].ToolTip = "You can click this cell";
        e.Row.Cells[2].ForeColor = System.Drawing.Color.Blue;
    }
}

谢谢