Как исключить зависшего тд из таблицы зависания? - PullRequest
Новая
       37

Как исключить зависшего тд из таблицы зависания?

2 голосов
/ 26 мая 2019

Я хочу применить фильтр, называемый «размытие», к таблице (только при наведении курсора в css), исключая тд, который имеет наведение в этот момент. В противном случае фильтр размытия применяется от загрузки страницы. Итак, как я могу исключить td зависания при наведении на таблицу, только с помощью CSS? 

table td {
    filter: blur(1px);
}   

td:hover {
    filter:blur(0px)
}

1 Ответ

1 голос
/ 26 мая 2019

Чтобы таблица была размытой только при наведении, вы должны использовать селектор table:hover.Теперь, поскольку фильтр, примененный к элементу, также применяется к его дочерним элементам, и поскольку вы хотите, чтобы одна из ячеек (который является дочерним элементом) не имел этого фильтра, вы не можете применить его ко всей таблице.Вместо этого вам нужно применить его к каждой отдельной ячейке внутри таблицы накрытия, как вы это делали, но с добавленным псевдоселектором: table:hover td.

Затем, чтобы удалить фильтр из ячейки наведения, выестественно применил бы фильтр к следующему селектору: td:hover.Проблема здесь в том, что вы уже нацеливаетесь на все ячейки таблицы с предыдущим селектором (table:hover td), и этот первый селектор имеет более высокую специфичность (12), чем второй (11).Чтобы победить второй селектор, он должен иметь по крайней мере ту же специфичность и располагаться после первого.

Чтобы увеличить его специфичность на 1, вы можете просто добавить table, за которым следует пробел передэтогоЭто означает, что он нацелен на ячейку в таблице, которая вам нужна.

В результате вы получите следующий рабочий код: 

table:hover td { /* Specificity 12 */
  filter: blur(1px);
}

table td:hover { /* Also specificity 12, but placed after, so it wins */
  filter: blur(0px);
}
<table>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Помогает ли это?

...