css th:悬停改变背景 - 颜色

时间:2011-03-02 06:33:08

标签: css

我有以下结构的表:

     <table class="cedvel">
            <caption>
                count:
                <%:Html.Encode(TempData["RowsCount"])%></caption>
     <thead>
                <tr>
                    <th id="thAfield1" class="field1,asc">
                        <span>field1</span><span id="spanAfield1" class="spanAscDesc">↑↓</span>
                    </th>
                    <th id="thfild2" class="field2,asc">
                        <span>field2</span> <span id="spanfield2" class="spanAscDesc">↑↓</span>
                    </th>
................................
     </thead>
            <tbody>
                <%if (Model.<----->.Count() > 0)
                  {
                      foreach (var abonent in Model.<---->)
                      {%>
                <tr>
                    <td>
                        data
                    </td>
                    <td>
                        data
                    </td>
................................
    </tr>
     <tr class="noData">
                    <td colspan="11">
                        no info
                    </td>
                </tr>
                <% }%>
            </tbody>
        </table>

现在我想改变背景 - 颜色悬停在th。但不能这样做。但只是我可以在徘徊在tr时改变颜色。但是我不能。

table.cedvel th
{
    background-color: #c3dde0;
    background-image: url(../Content/SiteImages/1.png);
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.cedvel th:hover
{
    background-color: Red;
}

我只是在悬停时设置background-image:none。这是我的问题。当我徘徊在它上面。它改变了背景颜色。但是我的照片。隐藏了它。

2 个答案:

答案 0 :(得分:2)

看看这个小提琴:http://jsfiddle.net/jomanlk/Bcayc/它的形式是e

你的CSS可能有问题。

答案 1 :(得分:1)

table.cedvel th {
    background-color: #c3dde0;
    background-image: url(../Content/SiteImages/1.png);
}

table.cedvel th:hover {
    background-color: red;
    background-image: none;
}