Как объединить nth-child и наведение курсора в TailwindCSS?

Можно ли совместить n-ый ребенок и зависание при попутном ветре?

<tr key = {i} className='[&>*:nth-child(even)]:bg-[white] hover:bg-[#6b7280] [&>*:nth-child(odd)]:bg-[#eee] hover:bg-[#6b7280]'>

Это то, что у меня сейчас есть, но теперь наведение не работает, без правила четности, при наведении изменяются только нечетные столбцы...

Обновлено: новая версия кода:

{dataProtokoll.map((k, i) => {
  return (
    <tr key = {i} className='[&>*:nth-child(odd)]:bg-[#eee] [&>*:nth-child(even)]:bg-[white] group' onClick = {() => { i === selectedRowProtokoll ? setSelectedRowProtokoll(-1) : setSelectedRowProtokoll(i) }}>
      <>
        {Object.values(k).map(value => <td className = {clsx('text-left border px-2.5 py-2 border-solid border-[rgb(160_160_160)] group-hover:bg-[#6b7280]', { 'bg-[#6b7280]': i === selectedRowProtokoll })}>{value}</td>)}
      </>
    </tr>
  );
})}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
53
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы применяете background-color к <tr> при наведении курсора. Внутренние элементы (предположительно элементы <td>) имеют свои собственные цвета фона. Цвет фона элемента <td> рисуется поверх цвета фона элемента <tr>, поэтому он никогда не отображается. Вместо этого вы можете рассмотреть возможность изменения цвета фона всех элементов <td>, например:

function App() {
  const i = 0;
  const items = Array(10).fill(null);

  return (
    <table>
      <tr key = {i} className='[&>*:nth-child(even)]:bg-[white] [&>*:nth-child(odd)]:bg-[#eee] *:hover:!bg-[#6b7280]'>
        {items.map((_, i) => (
          <td>Cell {i}</td>
        ))}
      </tr>
    </table>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity = "sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity = "sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>

<div id = "app"></div>

Или:

function App() {
  const i = 0;
  const items = Array(10).fill(null);

  return (
    <table>
      <tr key = {i} className='[&>*:nth-child(even)]:bg-[white] [&>*:nth-child(odd)]:bg-[#eee] group'>
        {items.map((_, i) => (
          <td class = "group-hover:bg-[#6b7280]">Cell {i}</td>
        ))}
      </tr>
    </table>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity = "sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity = "sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>

<div id = "app"></div>

Интересно, что теперь темно-серым становится только каждый второй столбец, а не все, я отредактирую свой вопрос для новой версии кода!

Clebo Sevic 07.06.2024 18:43

Кажется, работает нормально в этом JSFiddle. Рассмотрите возможность фактического воспроизведения проблемы, а не только самого кода.

Wongjn 07.06.2024 19:36

Сорри, у меня сработало, у меня было два экземпляра таблицы в разных файлах, я обновил не ту таблицу. Второй сработал для меня (по крайней мере, это решение, которое я пробовал.)

Clebo Sevic 07.06.2024 19:46
Ответ принят как подходящий

Просто используйте эти префиксы классов: first:, second:, odd:, even:, last:. Вы можете использовать его в каждом дочернем классе. Независимо от индекса, они будут применены к конкретному элементу div.

Другие вопросы по теме