Как сделать выделение строки в таблице, не меняя цвет самой строки?

Question

Всем привет, возможно глупо сформулировал вопрос. Не могу понять, как с помощью css (sass), сделать визуальное наведение мышки на строку. Нашел разные способы с помощью hover, и так далее. Но во всех реализациях, цвет строки при наведении кардинально изменяется. Мне нужно просто немного затемнить строку при наведении мышки, не меняя его оригинальный цвет.
Тут хороший пример как это выглядит https://codepen.io/Meller008/pen/zYNVNJq?editors=101 На примере видно, что не зависимо от цвета фона ячейки, происходит небольшое затемнение, что не мешает различать оригинальный цвет.

<div id="q-app">
  <div class="q-pa-md">
    <q-markup-table>
      <template>
        <thead>
          <tr>
            <th class="text-left">Dessert (100g serving)</th>
            <th class="text-right">Calories</th>
          </tr>
        </thead>
      </template>
      <template>
        <tbody>
          <tr>
            <td class="text-left" style="background: #ff9797">Frozen Yogurt</td>
            <td class="text-right">159</td>
          </tr>
          <tr>
            <td class="text-left" style="background: #ff9797">Ice cream sandwich</td>
            <td class="text-right">237</td>
          </tr>
          <tr>
            <td class="text-left" style="background: #5e377b">Eclair</td>
            <td class="text-right">262</td>
          </tr>
          <tr>
            <td class="text-left" style="background: #5e377b">Cupcake</td>
            <td class="text-right">305</td>
          </tr>
          <tr>
            <td class="text-left">Gingerbread</td>
            <td class="text-right">356</td>
          </tr>
        </tbody>
      </template>
    </q-markup-table>
  </div>
</div>

Answer 1

В приведенном примере подсвечивание строки таблицы при наведении на нее реализовано с помощью добавления псевдоэлемента ::before для каждой ячейки td таблицы, который показывается при наведении на строку tr. Ниже пример, который вам нужен, взял его оттуда как есть, ничего не меняя.

table {border-collapse: separate; border-spacing: 0; width: 100%; box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%);}
thead {border-bottom: 1px solid black;}
td {border-bottom: 1px solid rgba(0,0,0,0.1); padding: 10px 5px;}

/*Ниже то что вам нужно*/

table td {position: relative;}

td::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.03);
}

tr:hover td::before {
    content: "";
}

<table>
<thead>
  <tr>
    <td class="text-left" style="background: #ff9797">Frozen Yogurt</td>
    <td class="text-right">159</td>
  </tr>
</thead>
<thead>
  <tr>
    <td class="text-left" style="background: #ff9797">Ice cream sandwich</td>
    <td class="text-right">237</td>
  </tr>
</thead>
<thead>
  <tr>
    <td class="text-left" style="background: #5e377b">Eclair</td>
    <td class="text-right">262</td>
  </tr>
</thead>
<thead>
  <tr>
    <td class="text-left" style="background: #5e377b">Cupcake</td>
    <td class="text-right">305</td>
  </tr>
</thead>
<thead>
  <tr>
    <td class="text-left">Gingerbread</td>
    <td class="text-right">356</td>
  </tr>
</thead>
</table>

БЛОГ НА HUSL

Как сделать выделение строки в таблице, не меняя цвет самой строки?

Ответы (1 шт):