CSS mouseover 高亮表格超链接答案

【问题标题】：CSS mouseover highlight table hyperlinkCSS mouseover 高亮表格超链接
【发布时间】：2018-01-14 12:20:58
【问题描述】：

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

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

我想禁用鼠标悬停。我想在 tbody 上使用鼠标悬停。

【问题讨论】：

标签： html css mouseevent highlight mouseover

【解决方案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>

【讨论】：

【解决方案2】：

这样改。这很好用

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

【讨论】：

【解决方案3】：

只需稍微更改您的 CSS。包括 tbody 作为选择器。

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

【讨论】：

【解决方案4】：

只需添加此样式：

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

【讨论】：