Question

当我将鼠标悬停在表格行上时，我想突出显示我的表格行。我有悬停和突出显示使用CSS工作的行为。但在我应用样式后，表格行开始包装。

以下是before我应用CSS和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>

希望有所帮助。另外，我确定了您的行样式范围，以便它们不会应用于表标题。

Css鼠标悬停突出显示表

1 个答案: