Столбец таблицы при наведении курсора не работает из-за фона

Question

Я получил этот CSS код, который выделяет столбец и строку при наведении курсора. Он отлично работает. Однако у меня есть фоновый цвет как часть дизайна пользовательского интерфейса на DIV. Я не могу избавиться от этого, и это отображается поверх абсолютной позиции с отрицательным z-индексом, и поэтому эффект зависания перестает отображаться. Как сохранить фоновый цвет и при этом заставить его работать?

.size {
    background-color: #eee;
    padding: 50px 0;
}

table {
    overflow: hidden;
    display: inline-block;
}

td,
th {
    border: 1px solid #999;
    padding: 10px;
    position: relative;
}

th {
    background-color: #fff;
}

td:hover::before {
    background-color: #eee;
    content: '';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -2;
}

td:hover::after {
    background-color: #ffa;
    content: '';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

<div class="size">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-11 text-center">
                <h2>Size</h2>
                <div class="row">
                    <div class="col-md-12">
                        <table>
                            <tr>
                                <th class="head"></th>
                                <th>xxs</th>
                                <th>xs</th>
                                <th>s</th>
                                <th>m</th>
                                <th>l</th>
                                <th>xl</th>
                            </tr>
                            <tr>
                                <th>neck</th>
                                <td>14</td>
                                <td>14.5</td>
                                <td>15</td>
                                <td>15.5</td>
                                <td>16</td>
                                <td>16.5</td>
                            </tr>
                            <tr>
                                <th>chest</th>
                                <td>18</td>
                                <td>19</td>
                                <td>20</td>
                                <td>21</td>
                                <td>22</td>
                                <td>23</td>
                            </tr>
                            <tr>
                                <th>length</th>
                                <td>26.5</td>
                                <td>27</td>
                                <td>27.5</td>
                                <td>28</td>
                                <td>28.5</td>
                                <td>29</td>
                            </tr>
                            <tr>
                                <th>waist</th>
                                <td>17.5</td>
                                <td>18.5</td>
                                <td>19.5</td>
                                <td>20.5</td>
                                <td>21.5</td>
                                <td>22.5</td>
                            </tr>
                            <tr>
                                <th>sleeve</th>
                                <td>32.75</td>
                                <td>33</td>
                                <td>33.25</td>
                                <td>33.5</td>
                                <td>33.75</td>
                                <td>34</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

rgb = '#eee';
a = '0.5';
rgba='('+parseInt(rgb.substring(1,3),16)+','+parseInt(rgb.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+a+')';

Answer 2

Небольшой хитрый обходной путь -

.size {
  background: rgba(0, 0, 0, 0.06);
  padding: 50px 0;
}

rgba (0, 0, 0, 0.06); и #eeeeee - это тот же оттенок серого, но первый на самом деле в основном прозрачный черный. Это позволит вам продолжать видеть эффекты зависания за фоном без проблем с устранением проблемы с z-индексом. Лучшим решением было бы вместо этого решить проблему z-индекса, но на всякий случай, если вы не можете этого сделать.