鼠标悬停在 Gridview ASP.net 中使用 CSS
Posted
技术标签:
【中文标题】鼠标悬停在 Gridview ASP.net 中使用 CSS【英文标题】：mouseover hover in Gridview ASP.net using CSS 【发布时间】：2012-08-09 06:37:15 【问题描述】：这可能是一件非常简单的事情，但我对 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# 中一定遗漏了一些非常简单的东西。任何帮助，将不胜感激！谢谢！
【问题讨论】：
您的Gridview.css 不必与您的gridview.aspx 位于同一文件夹中，只要您在您的reference it 正确地位于您的.aspx 文件中，并确保它可以被客户（访问您网站的人）。此外，您应该将 :hover 伪类添加到您的 CSS 中。类似.Gridview tr.highlight:hover。
【参考方案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 伪类。
【讨论】：
【参考方案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，如果你喜欢用它，你可以用同样的方法简单地多做一个样式。
【讨论】：
如果我使用那个 CSS 文件，aspx 和 C# 部分是否相同？我是这样实现的：
按照本教程更改鼠标悬停时突出显示的行：
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;";
【讨论】：
【参考方案4】：您可以使用 RowCreated 创建悬停效果，因为这需要回发。你应该在你的 CSS 中使用 hover 伪类。像这样的
.Gridview tr:hover
background-color:blue;
color:white;
Gridview css 类应用于您的 Gridview 的位置
【讨论】：
【参考方案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" />
您可以设置交替行背景颜色和字体颜色
【讨论】：
【参考方案6】：这就是这么简单的事情。
在头部添加 CSS
#MainContent_gvDevice tr:Hover
background-color:#F6F6F6;
在这里而不是gvDevice 输入您的gridview id。
【讨论】：
【参考方案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;");
【讨论】：
【参考方案8】：我认为我有迄今为止实施的最短和最简单的解决方案。无需编辑后面的代码或 id/类名称。您需要进行的唯一编辑是添加此 CSS：
tr[class^='dxgvDataRow']:hover td
background-color: #272727 !important;
【讨论】：
【参考方案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
【讨论】：
【参考方案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;
谢谢
【讨论】：
以上是关于鼠标悬停在 Gridview ASP.net 中使用 CSS的主要内容，如果未能解决你的问题，请参考以下文章
asp.net中GridView怎样进行分页，编辑，删除操作