CSS 鼠标悬停高亮 table 超链接

Question

我正在使用 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>

我想禁用 hover on 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 作为选择器。

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

CSS 鼠标悬停高亮 table 超链接

CSS mouseover highlight table hyperlink

html

css

mouseevent

highlight

mouseover