CSS 鼠标悬停突出显示表超链接

Question

我正在使用CSS3hover效果，并面临有关元素的问题。

问题是当我将鼠标指向一个th(使用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>

我想禁用悬停在头上。我想在身体上使用悬停。

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>

Answer 2

只需添加此样式：

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

Answer 3

稍微改变一下你的CSS。包括正文作为选择器。

.maps-btn tbody tr {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.maps-btn tbody tr:hover {
background-color: blue;
color: white;
}
.maps-btn tbody 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>

Answer 4

像这样更改它。这工作正常

.maps-btn tr, .maps-btn tr 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 a:hover, .maps-btn tr:hover a {
color: white;
}