td마다 마우스 오버 시 텍스트 색상 변경하는 방법

Question

... ...

a

b

c

d

e

d

.tmptable tr:hover td:not(.testfirst) span { @apply text-red-600; } .tmptable p:hover { @apply text-blue-600; } .scheduleTable p:hover .scheduleTable tr td span {//테스트 코드 @apply text-[#666666]; }현재 어느 td에 마우스 오버하게되면 마우스 오버한 행의 text들의 색상은 붉은색으로 변경됩니다.제가 구현하고 싶은건

에 있는 텍스트를 오버하게되면 오버한

태그 이외에

가 속해있는 다른들 text 색상은붉은 색이 아닌 다른색으로 변경하려고 합니다.아무래도 처음 tr 오버시 붉은색으로 변경하는 코드가 있다보니

가 있는 td에 마우스만 갖다되도 붉으색으로 변경되는 상황입니다.이런 경우 어떻게 수정해야 제가 원하는 기능을 구현할수 있을까요?tailwindcss 라이브러리를 사용하고 있습니다.

킁킁탐정 · Accepted Answer

질문의 의도를 명확하게 테스트할 코드는 아니라서 답변이 확실하지 않지만 이해한대로 만들어보면 다음과 같습니다.https://play.tailwindcss.com/7eEcRTwdbP다양한 상태 관련 조건을 줄 수 있습니다. 꼭 아래의 문서를 모두 살펴보시길 바랍니다.https://tailwindcss.com/docs/hover-focus-and-other-states

몰랑토끼 · Answer

일단 css자체로는 불가능합니다. 예를 들어 3번째 tr의 4번째 td의 p에 오버한다면 1번째 tr로 추적이 안돼요. 간단한방법은 p 에 onMouseOver 같은 이벤트를 넣고, 호버시 table자체에 클래스를 줍니다. 그 클래스는 table p { color: red}로 전체 색상을 바꾸고, onModueOver는 인덱스를 받아서 오버한 키와 비교하여 같을때 클래스를 바꿔줍니다.

특이점이 왔다 · Answer

이럴때는 컴포넌트를 따로 빼서 그걸 td처럼 사용하는게 좋습니다

td마다 마우스 오버 시 텍스트 색상 변경하는 방법

3개의 답변

Q&A 목록