ASP.NET：HTML 表格中的 GridView 的背景也会改变颜色（鼠标悬停）

Question

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

代码：

<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 元素的 CssClass 属性...

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