У меня есть таблица, где в каждом столбце они имеют разные цвета для текстовой части.

Что мне нравится делать при наведении строки, так это выделять фоном, а весь текст смещается на один цвет вместо отдельных цветов при обычном отображении.

Ниже мой код. Вы увидите фиолетовый, отличный, черный текст. Затем, когда он зависает, только черный текст становится красным.

Теперь я попытался установить наведение на каждый столбец <td>, но это не сработало. Цвет наведения изменяет цвет текста только тогда, когда мышь находится над ячейкой TD, а не когда какая-либо из ячеек находится над этой конкретной строкой.

.musicListTracks h5 {
  padding: 0px;
  margin: 0px;
}

.musicListTracks tr:hover {
  background-color: #000000;
  color: red !important;
  cursor: pointer;
}

.musicListTracks tr td:nth-child(1) span {
  color: #8470FF;
  cursor: pointer;
}

.musicListTracks tr td:nth-child(2) h5 {
  color: darkgrey;
}
<table class="musicListTracks" cellpadding=5 cellspacing=0>
  <tr>
    <td><span>cell 1</span></td>
    <td>
      <h5>cell 2</h5>
    </td>
    <td>
      <h5>cell 3</h5>
    </td>
  </tr>
  <tr>
    <td><span>cell 1b</span></td>
    <td>
      <h5>cell 2b</h5>
    </td>
    <td>
      <h5>cell 3b</h5>
    </td>
  </tr>
  <tr>
    <td><span>cell 1c</span></td>
    <td>
      <h5>cell 2c</h5>
    </td>
    <td>
      <h5>cell 3c</h5>
    </td>
  </tr>
</table>

Любая помощь очень ценится.

5
user1941432 28 Май 2017 в 01:59

2 ответа

Лучший ответ

У вас есть цвета, определенные для первых двух ячеек, но не для третьей. Вот почему только третья ячейка принимает красный цвет при наведении.

Вместо этого:

.musicListTracks tr:hover {
  background-color: #000000;
  color: red !important;
  cursor: pointer;
}

Попробуй это:

.musicListTracks tr:hover {
  background-color: #000000;
  cursor: pointer;
}

.musicListTracks tr:hover * {
  color: red !important;
}
.musicListTracks h5 {
  padding: 0px;
  margin: 0px;
}

.musicListTracks tr:hover {
  background-color: #000000;
  cursor: pointer;
}

.musicListTracks tr:hover * {
  color: red !important;
}

.musicListTracks tr td:nth-child(1) span {
  color: #8470FF;
  cursor: pointer;
}

.musicListTracks tr td:nth-child(2) h5 {
  color: darkgrey;
}
<table class="musicListTracks" cellpadding=5 cellspacing=0>
  <tr>
    <td><span>cell 1</span></td>
    <td>
      <h5>cell 2</h5>
    </td>
    <td>
      <h5>cell 3</h5>
    </td>
  </tr>
  <tr>
    <td><span>cell 1b</span></td>
    <td>
      <h5>cell 2b</h5>
    </td>
    <td>
      <h5>cell 3b</h5>
    </td>
  </tr>
  <tr>
    <td><span>cell 1c</span></td>
    <td>
      <h5>cell 2c</h5>
    </td>
    <td>
      <h5>cell 3c</h5>
    </td>
  </tr>
</table>
2
Michael Benjamin 27 Май 2017 в 23:15

Майкл прав в своем ответе, потому что вы не нацеливаетесь на все элементы внутри ТД. В его ответе используется подстановочный знак для обозначения любого элемента внутри вашего тд. Если это то, что вы хотите, его ответ будет лучшим. Если вы хотите настроить таргетинг только на span и h5, вы можете использовать следующее:

.musicListTracks tr:hover {
    background-color: #000000;
    cursor: pointer;
}

.musicListTracks tr:hover td {
    color: red !important;
}

.musicListTracks tr:hover h5 {
    color: red !important;
}
0
user1011627 27 Май 2017 в 23:15