C# 鼠标悬停在 Gridview ASP.net 中使用 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11927417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mouseover hover in Gridview ASP.net using CSS
提问by Kevin
This is probably a really simple thing but I am completely new to CSS. I just want to be able to have mouseover hover effect on my rows in gridview, changing the color of the row if it is being hovered over. I'm curious as to whether or not my CSS file is in the right place? Should my Gridview.CSS be in the same folder as my gridview.aspx (I assume so?).
这可能是一件非常简单的事情，但我对 CSS 完全陌生。我只是希望能够在 gridview 中的行上具有鼠标悬停效果，如果它被悬停在行上，则更改行的颜色。我很好奇我的 CSS 文件是否在正确的位置？我的 Gridview.CSS 是否应该与我的 gridview.aspx 位于同一文件夹中（我认为是这样？）。
Here is my CSS file:
这是我的 CSS 文件：
.Gridview tr.normal
{
background-color:white;
}
.Gridview tr.highlight
{
background-color:yellow;
}
And here is how I am trying to implement it: In the .aspx file:
这是我尝试实现它的方式：在 .aspx 文件中：
<asp:GridView ID="MsgInbox" runat="server" ....OnRowCreated="Gridview_RowCreated" CssClass = "Gridview">
And in the C# code behind:
在后面的 C# 代码中：
protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.CssClass = "highlight";
}
}
I know I must be missing something really simple in my C#. Any help would be appreciated! Thanks!
我知道我的 C# 中一定缺少一些非常简单的东西。任何帮助，将不胜感激！谢谢！
回答by Aristos
First you set the Row style using this code, inside the GridView, I call it .row
首先，您使用此代码设置 Row 样式，在 GridView 中，我将其称为 .row
<RowStyle CssClass="row" />
then you use this css to make it change the background color, or what ever you like when the mouse is move over.
然后你使用这个 css 让它改变背景颜色，或者当鼠标移动时你喜欢什么。
tr.row
{
background-color:#fff;
}
tr.row td
{
}
tr.row:hover td,
tr.row.over td
{
background-color: #eee;
}
The trick here is that because GridView is rendered as table, I add the tdand the trin the style to access the mouse over the table lines.
这里的技巧是，因为 GridView 呈现为表格，所以我在样式中添加了td和tr以访问表格行上的鼠标。
Because there is also the alternative row style AlternatingRowStyleif you like to use it, you can simple make one more style the same way.
因为AlternatingRowStyle如果您喜欢使用它，还有替代行样式，所以您可以以相同的方式简单地制作更多样式。
回答by vadim
You can create hover effect using RowCreated because this will need postback for this. You should use hover pseudo-class within you css. Something like this
您可以使用 RowCreated 创建悬停效果，因为这需要回发。您应该在 css 中使用悬停伪类。像这样的东西
.Gridview tr:hover
{
background-color:blue;
color:white;
}
where Gridview css class applied to your Gridview
其中 Gridview css 类应用于您的 Gridview
回答by Satinder singh
This is how i done in my project
这就是我在我的项目中所做的
CSS:
CSS：
.tdonhover
{
background-color:#d9d9d9 !important;
}
.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 page :This page contains gridview control.
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>`
Using
使用
<RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
<AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />
you can set Alternate row Background color and fontcolor
您可以设置备用行背景颜色和字体颜色
回答by Brian
Here is how I accomplished this:
这是我如何做到这一点：
Follow this tutorial to change the highlighted row on mouseover:
按照本教程更改鼠标悬停时突出显示的行：
http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx
http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx
This also explains the code to process a row selection. My gridview has alternating row colors. In order to restore the original color of the row you just hovered, create a custom attribute in mouseover for the original backgroundColor and restore it on mouseOut like so:
这也解释了处理行选择的代码。我的 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;";
回答by Ankit
This is so simple thing.
这是这么简单的事情。
add the CSS in head part
在头部添加 CSS
#MainContent_gvDevice tr:Hover
{
background-color:#F6F6F6;
}
here instead of gvDeviceput your gridview id.
在这里而不是gvDevice把你的 gridview id。
回答by Malcont3nt
I stole part of my solution to this from another answerso my styling affects ALL gridviews in one shot.
我从另一个答案中窃取了部分解决方案，因此我的样式会一次性影响所有网格视图。
Add this CssClass="GridView"to your asp:GridView tag.
将此添加 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%">
Then in your style.css you can do things like the following:
然后在 style.css 中，您可以执行以下操作：
table.GridView th {
border-bottom: 1px solid #ED7A0A;
text-decoration: none;
}
table.GridView tr:hover {
background-color: #fabf85;
}
The key is the :hoverpseudo-class.
关键是:hover伪类。
回答by Vasanthakumar Ayyanar
Better way yo can handle this mouseover using OnRowCreated
使用 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;");
}
}
回答by ErTR
I think I have the shortest and easiest solution to implement so far. There is no need to edit code behind or id/class names. The only edit you need to make is adding this CSS:
我认为到目前为止我有最短和最简单的解决方案。无需编辑后面的代码或 id/class 名称。您需要进行的唯一编辑是添加此 CSS：
tr[class^='dxgvDataRow']:hover td{
background-color: #272727 !important;
}
回答by JIYAUL MUSTAPHA
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
}
}
回答by Dilip Kumar Choudhary
This is for column cell hover colorin the Gridview with ToolTip and ForeColor
这是用于带有 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;
}
}
Thank you
谢谢
