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

首先使用此代码在GridView中设置Row样式，我称之为.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 2

以下是我完成此操作的方法：

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

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

这也解释了处理行选择的代码。我的gridview有交替的行颜色。为了恢复刚刚悬停的行的原始颜色，在鼠标悬停时为原始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 3

我从另一个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 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" />

您可以设置备用行背景颜色和fontcolor

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

这是使用ToolTip和ForeColor在Gridview中的列单元格悬停颜色

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

谢谢

mouseover使用CSS在Gridview ASP.net中悬停

10 个答案: