Можно ли совместить 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>
);
})}
Вы применяете 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>
Кажется, работает нормально в этом JSFiddle. Рассмотрите возможность фактического воспроизведения проблемы, а не только самого кода.
Сорри, у меня сработало, у меня было два экземпляра таблицы в разных файлах, я обновил не ту таблицу. Второй сработал для меня (по крайней мере, это решение, которое я пробовал.)
Просто используйте эти префиксы классов: first:
, second:
, odd:
, even:
, last:
. Вы можете использовать его в каждом дочернем классе. Независимо от индекса, они будут применены к конкретному элементу div.
Интересно, что теперь темно-серым становится только каждый второй столбец, а не все, я отредактирую свой вопрос для новой версии кода!