ASP.NET: HTML中GridView的背景也会改变颜色(鼠标悬停)

Question

表中有3个网格视图，3< td >。我创建了一个CSS类来更改鼠标悬停时Gridview行的颜色。但问题是，GRIDVIEWS的背景也会改变颜色。因此，当我将光标悬停时，每一行都会改变颜色，但背景(< td >，网格视图的背面也会)也会改变颜色。如何仅更改网格视图行的颜色？

代码：

<style type="text/css">

        .CSSTable
        {
        margin: 0px;
        padding: 0px;
        width: 60%; /*Fits the <div>*/
        box-shadow: 10px 10px 5px #888888;
        border: 1px solid #000000;
    }
    .CSSTable table
    {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%; /*sets table all aligned*/
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    .CSSTable tr:last-child td:last-child
    {
        -moz-border-radius-bottomright: 0px;
        -webkit-border-bottom-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .CSSTable table tr:first-child td:first-child
    {
        -moz-border-radius-topleft: 0px;
        -webkit-border-top-left-radius: 0px;
        border-top-left-radius: 0px;
    }
    .CSSTable table tr:first-child td:last-child
    {
        -moz-border-radius-topright: 0px;
        -webkit-border-top-right-radius: 0px;
        border-top-right-radius: 0px;
    }
    .CSSTable tr:last-child td:first-child
    {
        -moz-border-radius-bottomleft: 0px;
        -webkit-border-bottom-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    .CSSTable tr:hover td
    {
    }
    .CSSTable tr:nth-child(odd)
    {
        background-color: #e5e5e5;
    }
    .CSSTable tr:nth-child(even)
    {
        background-color: #ffffff;
    }
    .CSSTable td
    {
        vertical-align: middle;
        border: 1px solid #000000;
        border-width: 0px 1px 1px 0px;
        text-align: left;
        padding: 7px;
        font-size: 11px;
        font-family: Arial;
        font-weight: normal;
        color: #000000;
    }
    .CSSTable tr:last-child td
    {
        border-width: 0px 1px 0px 0px;
    }
    .CSSTable tr td:last-child
    {
        border-width: 0px 0px 1px 0px;
    }
    .CSSTable tr:last-child td:last-child
    {
        border-width: 0px 0px 0px 0px;
    }
    .CSSTable tr:first-child td
    {
        background: -o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%);
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) );
        background: -moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000");
        background: -o-linear-gradient(top,#4c4c4c,000000);
        background-color: #4c4c4c;
        border: 0px solid #000000;
        text-align: center;
        border-width: 0px 0px 1px 1px;
        font-size: 10px;
        font-family: Verdana;
        font-weight: bold;
        color: #ffffff;
    }
    .CSSTable tr:first-child:hover td
    {
        background: -o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%);
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) );
        background: -moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000");
        background: -o-linear-gradient(top,#4c4c4c,000000);
        background-color: #4c4c4c;
    }
    .CSSTable tr:first-child td:first-child
    {
        border-width: 0px 0px 1px 0px;
    }
    .CSSTable tr:first-child td:last-child
    {
        border-width: 0px 0px 1px 1px;
    }
    .CSSTable tr:hover
    {
        background-color:Gray;
    }
</style>

Answer 1

既然您还没有发布与这个问题相关的html标记，那么我猜您已经将CSSTable类添加到包装器表中了？例如，如果您有这个html层次结构..。

<table class="CSSTable">
    <tr>
        <td><asp:GridView>...</asp:GridView></td>
    </tr>
    <tr>
        <td><asp:GridView>...</asp:GridView></td>
    </tr>
    <tr>
        <td><asp:GridView>...</asp:GridView></td>
    </tr>
</table>

你应该把它改成..。

<table>
    <tr>
        <td><asp:GridView CssClass="CSSTable">...</asp:GridView></td>
    </tr>
    <tr>
        <td><asp:GridView CssClass="CSSTable">...</asp:GridView></td>
    </tr>
    <tr>
        <td><asp:GridView CssClass="CSSTable">...</asp:GridView></td>
    </tr>
</table>

或者，如果您只针对行悬停，只需创建一个css类来处理悬停事件，然后设置RowStyle元素的RowStyle属性.

<asp:GridView>
     <RowStyle CssClass="" />
</asp:GridView>