html - Css 鼠标悬停突出显示表格

Question

我想在将鼠标悬停在表格行上时突出显示它们。我有悬停和突出显示行为来使用 CSS。但在我应用样式后，表格行开始换行。

这是 before 的截图我应用了 CSS，并且 after .请注意表格行如何在 after 屏幕截图中换行。

有什么办法可以解决这个问题吗？

.table_class tr {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  background: #2098D1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.table_class tr:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e1e1e1;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.table_class tr:hover,
.table_class tr:focus,
.table_class tr:active {
  color: white;
}

.table_class tr:hover:before,
.table_class tr:focus:before,
.table_class tr:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

<div class="col-md-9">

  <div class="row">
    <!-- TOP -->
    <table class="table table-bordered table_class">
      <tbody>
        <thead>
          <tr>
            <th colspan="2" class="child_meaning">Meaning of Aadi</th>
          </tr>
        </thead>
        <tr>
          <td>Name : </td>
          <td>Aadi</td>
        </tr>
        <tr>
          <td>Meaning : </td>
          <td>Adornment, Beginning, Perfect, Most important, Ornament, Unequalled</td>
        </tr>
        <tr>
          <td>Gender : </td>
          <td>Boy</td>
        </tr>
        <tr>
          <td>Numerology : </td>
          <td>6</td>
        </tr>
        <tr>
          <td>Syllables : </td>
          <td>2</td>
        </tr>
        <tr>
          <td>Religion : </td>
          <td>Hindu</td>
        </tr>
        <tr>
          <td>Rashi : </td>
          <td>Mesha</td>
        </tr>
        <tr>
          <td>Nakshatra : </td>
          <td>Krithika</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

查看您的屏幕截图，我认为问题是您的表格行在您实现悬停状态后开始换行？那是因为你设置了display: inline-block给你的<tr>元素。您可以通过将显示属性更改为不会将您的行变成内联元素的属性来修复它。像这样:

.table_class tbody>tr {
  display: block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  background: #2098D1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.table_class tbody>tr:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e1e1e1;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.table_class tbody>tr:hover,
.table_class tbody>tr:focus,
.table_class tbody>tr:active {
  color: white;
}

.table_class tbody>tr:hover:before,
.table_class tbody>tr:focus:before,
.table_class tbody>tr:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

<div class="col-md-9">

  <div class="row">
    <!-- TOP -->
    <table class="table table-bordered table_class">
      <tbody>
        <thead>
          <tr>
            <th colspan="2" class="child_meaning">Meaning of Aadi</th>
          </tr>
        </thead>
        <tr>
          <td>Name : </td>
          <td>Aadi</td>
        </tr>
        <tr>
          <td>Meaning : </td>
          <td>Adornment, Beginning, Perfect, Most important, Ornament, Unequalled</td>
        </tr>
        <tr>
          <td>Gender : </td>
          <td>Boy</td>
        </tr>
        <tr>
          <td>Numerology : </td>
          <td>6</td>
        </tr>
        <tr>
          <td>Syllables : </td>
          <td>2</td>
        </tr>
        <tr>
          <td>Religion : </td>
          <td>Hindu</td>
        </tr>
        <tr>
          <td>Rashi : </td>
          <td>Mesha</td>
        </tr>
        <tr>
          <td>Nakshatra : </td>
          <td>Krithika</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

希望对您有所帮助。此外，我对您的行样式进行了限定，因此它们不会应用于表格标题。