html - ASP.NET:GridView 在 HTML 表格中的背景也改变颜色(鼠标悬停)

Question

我在一个表中有 3 个 gridview，3 个 。我创建了一个 CSS 类来在鼠标悬停时更改 Gridview 行的颜色。但问题是，GRIDVIEWS 的背景也会改变颜色。因此，当我悬停光标时，每一行都会改变颜色，而且背景(< td >，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>