如何更改鼠标悬停行上的 GridView 单元格颜色答案

【问题标题】：How to change GridView cell color on row MouseOver如何更改鼠标悬停行上的 GridView 单元格颜色
【发布时间】：2013-12-01 05:30:18
【问题描述】：

我有一个 GridView，我想在鼠标悬停该行时更改单元格颜色。我尝试了以下方法：

e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#c8e4b6'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");
e.Row.Cells[1].Attributes.Add("onmouseover", "this.style.backgroundColor='green'");
e.Row.Cells[1].Attributes.Add("onmouseout", "this.style.backgroundColor='white'");

行颜色变化完美。但只有当鼠标移到该单元格上时，单元格颜色才会发生变化。

当鼠标在行上时，有没有办法改变单元格颜色？

【问题讨论】：

为什么你可以在 javascript 中尝试
你能帮我做吗？

标签： c# asp.net css gridview onmouseover

【解决方案1】：

试试这个

e.Row.Attributes.Add("onmouseover","this.originalcolor=this.style.backgroundColor;" + " this.style.backgroundColor='#FDCB0A';");

【讨论】：

感谢您的回复。行颜色发生变化。但我想在鼠标悬停时更改特定单元格的颜色。
尝试在鼠标悬停时移除特定单元格的背景颜色，然后在鼠标移出时添加所需的背景颜色。
就是这样。我不知道在“ROW”上的鼠标悬停时为特定的“CELL”删除或添加颜色。
检查你是否觉得这个有用aspsnippets.com/Articles/…
只改变行颜色而不改变单元格颜色

【解决方案2】：

 <script type="text/javascript" language="javascript">
  function SetHeight(txtdesc) {
            txtdesc.style.backgroundColor = 'blue';
        }
        function out(txtdesc) {
            txtdesc.style.backgroundColor = 'green';
        }
</script>

 <ItemTemplate>
<asp:TextBox ID="txtdiscpoint" ForeColor="Black" Font-Names="Verdana" Font-Size="1.10em" 
 TextMode="MultiLine" runat="server" onmouseover="SetHeight(this)" onmouseout="out(this)" > </asp:TextBox>
</ItemTemplate>

【讨论】：

谢谢。这仅在我移过特定单元格时才有效。如果我将鼠标移到该行上，单元格的颜色不会改变
鼠标移出你改变颜色

【解决方案3】：

使用它会改变你的单元格颜色

if (e.Row.RowType = DataControlRowType.DataRow)
{
    string onmouseoverStyle = "this.style.backgroundColor='blue'";
    string onmouseoutStyle = "this.style.backgroundColor='white'";
    e.Row.Cells[1].Attributes.Add("onmouseover",onmouseoverStyle);
    e.Row.Cells[1].Attributes.Add("onmouseout",onmouseoutStyle);
}

你也可以根据自己的行来修改它

您也可以使用此代码

if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string onmouseoverStyle = "this.style.backgroundColor='blue'";
        string onmouseoutStyle = "this.style.backgroundColor='white'";
        string onmouseoverStyle1 = "this.style.backgroundColor='green'";
        string onmouseoutStyle1 = "this.style.backgroundColor='white'";
        e.Row.Attributes.Add("onmouseover", onmouseoverStyle1);
        e.Row.Attributes.Add("onmouseout", onmouseoutStyle1);
        e.Row.Cells[1].Attributes.Add("onmouseover", onmouseoverStyle);
        e.Row.Cells[1].Attributes.Add("onmouseout", onmouseoutStyle);
    }

【讨论】：

但是先改变你的行颜色然后你的单元格颜色否则它只会显示你的行颜色

【解决方案4】：

我认为您必须在鼠标悬停事件处理程序中设置Cells[1] 的样式。

您不应该设置单元格的 onmouseover 和 onmouseout 属性，因为这只会在您将鼠标悬停在其上时起作用，而不是在整行上。

下面的代码将描述更多：

我有 GridView 名称 GridView1，并且我有 Javascript 函数来处理鼠标悬停和鼠标移出事件，如下所示

<script type="text/javascript" >
    function onMouseOver(rowIndex) {
        var gv = document.getElementById("GridView1");
        var rowElement = gv.rows[rowIndex];
        rowElement.style.backgroundColor = "#c8e4b6";
        rowElement.cells[1].style.backgroundColor = "green";
    }

    function onMouseOut(rowIndex) {
        var gv = document.getElementById("GridView1");
        var rowElement = gv.rows[rowIndex];
        rowElement.style.backgroundColor = "#fff";
        rowElement.cells[1].style.backgroundColor = "#fff";
    }
</script>

在 RowDataBound 事件处理程序中，尝试向所有行添加属性 onmouseover 和 onmouseout，由 Javascript 函数 onMouseOver 和 处理onMouseOut

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
       e.Row.Attributes["onmouseover"] = "onMouseOver('" + (e.Row.RowIndex + 1) + "')";
       e.Row.Attributes["onmouseout"] = "onMouseOut('" + (e.Row.RowIndex + 1) + "')";
    }
}

GridView 标签应该是这样的：

<asp:GridView ID="GridView1" runat="server" ...  OnRowDataBound="GridView1_RowDataBound">

我希望这会有所帮助。

【讨论】：

【解决方案5】：

试试这个：

 <style type="text/css">

        #GridView1 tr.rowHover:hover

        {

            background-color: Yellow;

            font-family: Arial;

        }

    </style>

    <asp:GridView ID="GridView1" runat="server" EnableViewState="false" RowStyle-CssClass="rowHover" ClientIDMode="Static" />

链接：

http://www.dotnetfunda.com/articles/show/1374/how-to-display-mouseover-effect-in-gridview-rows-using-only-css

【讨论】：