Блог

Главная - Вопросы по программированию - Применение tr:наведите курсор, но только к определенному классу

Применение tr:наведите курсор, но только к определенному классу

#css #material-table

Вопрос:

У меня есть CSS, который окрашивает строку в моей таблице при наведении курсора.

 tr:hover {
  background: gray !important;
}

Однако он также выделяет строку фильтра в таблице. Поэтому я осмотрел его и обнаружил, что он имеет <tr class="MuiTableRow-root MuiTableRow-hover"...etc

Итак, мой вопрос в том, как я могу изменить приведенный выше код, чтобы он применялся только к тому классу, который показан выше?

Правка: Первая попытка применить класс.

 .MuiTableRow-root MuiTableRow-hover {
  tr:hover {
    background: gray !important;
  }
}

Комментарии:

1. это может помочь вам: developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

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

3. Я использую таблицу материалов. В строке фильтры используется другой класс. Поэтому мне нужно только знать, как применить вышеупомянутый tr:наведите курсор на конкретный класс, о котором я упоминал.

4. @Lety Я пытался применить класс, но, похоже, есть вложенные классы. Я отредактировал конец исходного поста, чтобы показать, что я сейчас пытаюсь, но это не работает. Есть какие-нибудь идеи о моей ошибке?

5. @Jon взгляните на правильные ответы. «tr.<имя класса>» получает каждый элемент tr с именем класса, но если селекторы разделены пробелом, он ищет дочерний элемент селектора с этим классом…

Ответ №1:

Как указано в комментариях, пожалуйста, ознакомьтесь с документацией по селекторам классов.

У вас возникли проблемы с объединением класса с тегом элемента.
В этом случае они написаны вместе следующим образом:

 tr.MuiTableRow-hover:hover {
  background: gray !important;
}
  • Когда HTML — тег содержит класс: Напишите тег, . а затем класс
  • Когда HTML — тег содержит внутри какой-либо элемент с определенным классом, разделите их пробелом
  • Сделайте себе одолжение и найдите учебники по CSS, которые научат вас основам. Это не очень трудно узнать, если у вас есть свободное время

Немного продвинутый-это доверять специфике CSS и не обращать внимания !important . Если ваш селектор более специфичен (или ваш CSS был загружен позже), ваш стиль будет применен даже без использования !important .

 tr.MuiTableRow-hover:hover {
  background: gray;
}

Комментарии:

1. Спасибо, это сработало идеально. Я уже проходил некоторые учебные пособия раньше, но что меня сбило с толку, так это вся вложенность, множество применяемых стилей, и мне следовало убрать tr из { }.

2. Конечно, это понятно. Это сбивает с толку, когда пытаешься объединить все уроки сразу. CSS допускает только один для {} каждого применяемого стиля. Но есть инструменты, которые позволяют использовать вложенный синтаксис и писать его как CSS для вас (например, SASS/SCSS ). Рад помочь.

Ответ №2:

Правило css должно выглядеть следующим образом:

 tr.MuiTableRow-hover:hover {
   background: gray !important;
}

Обратите внимание, что использование !important не является лучшей практикой, поэтому лучше, если вы попытаетесь избежать этого, если это возможно

Метки: ,