html - CSS 鼠标悬停高亮表格超链接

Question

我正在使用 CSS3 hover 效果并面临一个元素的问题。

问题是当我将鼠标指向第一个 时(使用 hover)，th 超链接的颜色与背景，所以我需要在那个事件上改变它。

这里是一个活生生的例子:

.maps-btn tr {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.maps-btn tr:hover {
    background-color: blue;
    color: white;
}
.maps-btn a:hover {
    color: white;
}

<div class="col-md-9">
    <div class="row">
        <table class="table table-bordered table_class maps-btn">
            <thead>
                <tr>
                    <th>1111</th>
                    <th>2222</th>
                    <th>3333</th>
                    <th>4444</th>
                    <th>5555</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="#">AAAA</a></td>
                    <td>BBBB</td>
                    <td>CCCC</td>
                    <td>DDDD</td>
                    <td>EEEE</td>
                </tr>
                <tr>
                    <td><a href="#">FFFF</a></td>
                    <td>GGGG</td>
                    <td>HHHH</td>
                    <td>IIII</td>
                    <td>JJJJ</td>
                </tr>
            </tbody>
        </table>
    </div> 
</div>

我想禁用 hover on thead。我想在 tbody 上使用悬停。

Answer 1

你可以这样做:

.maps-btn tr {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.maps-btn a {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.maps-btn tr:hover {
    background-color: blue;
    color: white;
}

.maps-btn tr:hover a {
    background-color: blue;
    color: white;
}
.maps-btn a:hover  {
    color: white;
}

<div class="col-md-9">
    <div class="row">
        <table class="table table-bordered table_class maps-btn">
            <thead>
                <tr>
                    <th>1111</th>
                    <th>2222</th>
                    <th>3333</th>
                    <th>4444</th>
                    <th>5555</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="#">AAAA</a></td>
                    <td>BBBB</td>
                    <td>CCCC</td>
                    <td>DDDD</td>
                    <td>EEEE</td>
                </tr>
                <tr>
                    <td><a href="#">FFFF</a></td>
                    <td>GGGG</td>
                    <td>HHHH</td>
                    <td>IIII</td>
                    <td>JJJJ</td>
                </tr>
            </tbody>
        </table>
    </div> 
</div>