CSS-эффект при наведении на таблицу не применяет эффекты tbody и tr при наведении курсора между двумя ячейками - PullRequest
Новая
       8

CSS-эффект при наведении на таблицу не применяет эффекты tbody и tr при наведении курсора между двумя ячейками

0 голосов
/ 27 февраля 2019

Я использую приведенный ниже код HTML и CSS для создания таблицы с сгруппированными строками, где и группа, и строка реагируют на событие наведения мыши: 

.c-table-display {
  border-spacing: 1px;
  border-bottom: 1px solid #dedede;
  width: 100%;
}

.c-table-display__row-odd {
  background-color: #f3f7fc;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

.c-table-display__row-odd>td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__row-even {
  background-color: #deecf8;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

.c-table-display__row-even>td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__body--highlightable:hover tr {
  cursor: pointer;
  background: #E3EBDE;
}

tr.c-table-display__row--highlightable:hover {
  background: #FFE56F;
  cursor: pointer;
}

.c-table-display__body--highlightable:hover td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__row--highlightabe:hover td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__cell--icon {
  text-align: center;
}

.c-table-display__cell--icon>img {
  vertical-align: middle;
}
<table class="u-width-full c-table-display">
  <tbody class="c-table-display__body c-table-display__body--highlightable">
    <tr class="c-table-display__row-odd c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="102">
      <td>'test</td>
      <td title="unique">
        unique
      </td>
      <td title="">

      </td>
      <td title="">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
    </tr>
    <tr class="c-table-display__row-even c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="113">
      <td title="keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykey">
        keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeyke...
      </td>
      <td title="valuevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevalueva">
        valuevaluevaluevaluevaluevaluevaluevaluevaluevalue...
      </td>
      <td title="keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykey">
        keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeyke...
      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
    </tr>
  </tbody>
</table>

Проблема, с которой я столкнулся, заключается в том, что при наведении курсора на пространство RIGHT между двумя ячейками, ни строка, ни группа не получают эффект наведения.Как я могу это исправить, желательно, не удаляя интервал между границами?Я бы предпочел не использовать Javascript, поскольку мы использовали реализацию Javascript до того, как это вызвало проблемы с затяжными эффектами при наведении.

1 Ответ

0 голосов
/ 27 февраля 2019 

.c-table-display {
  //border-spacing: 1px;
  border-bottom: 1px solid #dedede;
  width: 100%;
}

.c-table-display__row-odd {
  background-color: #f3f7fc;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

.c-table-display__row-odd>td {
  vertical-align: middle;
  padding: 0 4px;
  border: 1px solid white;
}

.c-table-display__row-even {
  background-color: #deecf8;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

.c-table-display__row-even>td {
  vertical-align: middle;
  padding: 0 4px;
  border: 1px solid white;
}

.c-table-display__body--highlightable:hover tr {
  cursor: pointer;
  background: #E3EBDE;
}

tr.c-table-display__row--highlightable:hover {
  background: #FFE56F;
  cursor: pointer;
}

.c-table-display__body--highlightable:hover td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__row--highlightabe:hover td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__cell--icon {
  text-align: center;
}

.c-table-display__cell--icon>img {
  vertical-align: middle;
}
<table cellspacing="0" cellpadding="0" class="u-width-full c-table-display">
  <tbody class="c-table-display__body c-table-display__body--highlightable">
    <tr class="c-table-display__row-odd c-table-display__row c-table-display__row--highlightable js-machine-param-row change" machinerowid="17" parameterrowid="102">
      <td>'test</td>
      <td title="unique">
        unique
      </td>
      <td title="">

      </td>
      <td title="">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
    </tr>
    <tr class="c-table-display__row-even c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="113">
      <td title="keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykey">
        keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeyke...
      </td>
      <td title="valuevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevalueva">
        valuevaluevaluevaluevaluevaluevaluevaluevaluevalue...
      </td>
      <td title="keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeykey">
        keykeykeykeykeykeykeykeykeykeykeykeykeykeykeykeyke...
      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
    </tr>
  </tbody>
</table>

вы можете удалить и интервал между ячейками и добавить border для интервалов на td, теперь просто установите свойства верхнего нижнего края для первого и последнего дочернего элемента, и выхорошо идти.

Пинг мне, если у вас есть какие-либо вопросы.

...