Question

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

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'");

行颜色完美变化。但是只有当鼠标在那个细胞上移动时，细胞颜色才会改变。

当鼠标位于行时，有没有办法更改单元格颜色？

Answer 1

使用它会改变你的细胞颜色

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

Answer 2

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

您不应该设置单元格的 onmouseover 和 onmouseout 属性，因为只有在鼠标悬停在其上时才会有效，而不是在整行上。< / p>

下面的代码将描述更多：

我有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">

我希望这会有所帮助。

Answer 3

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

Answer 4

试试这个

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

Answer 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

如何在行MouseOver上更改GridView单元格颜色

5 个答案: