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

Question

我正在使用css3悬停效果，并且我有悬停效果的问题。当我指向鼠标时，悬停但是超链接的颜色的颜色正在改变。

这是一个实例：

.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>

我想禁止在thead上盘旋。我想在tbody上使用。

Answer 1

像这样改变它。这很好用

.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;
}

Answer 2

只需添加此样式：

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

Answer 3

稍微更改一下你的CSS。包含tbody作为选择器。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以这样做：

＆＃13;

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;