Почему моя реализация эффекта наведения в html не работает? ⇐ CSS

[Anonymous]

Я пытаюсь реализовать эффект наведения на таблицу на веб-странице, поэтому, когда я навожу указатель мыши на строку, строка становится серой, а все остальное — белым
Итак, у меня есть базовый стиль просто для того, чтобы убедиться, что это не мое рабочее место с ошибками, и теперь оно работает, когда я реализую его в более крупном коде, ничего не происходит. Я новичок в работе с CSS, поэтому понятия не имею, как это исправить. Мне было интересно, связано ли это с тем, что я установил белый цвет для всего контейнера таблицы, но как мне сделать таблицу белой, но при этом реализовать эффект наведения, чтобы они оба не влияли друг на друга?
Это моя реализация


.specific-table-container {
margin: 20px auto;
width: 90%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
background-color: #fff;
}

.specific-table-container table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}

.specific-table-container th,
.specific-table-container td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
background-color: #fff;
}

.specific-table-container tr:hover {
background-color: #f2f2f2;
}




Text
{text}
List
{list:label}


Text

{text}

List
{list:label}












Simple Hover Test

table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
tr:hover {
background-color: #f2f2f2; /* Grey color on hover */
}



Подробнее здесь: https://stackoverflow.com/questions/786 ... ot-working