javascript - ul의 li이 이동된 후 클릭 이벤트가 move-out 이벤트와 충돌합니다.

Question

그림과 같이 제가 원하는 효과는 ul의 li가 안으로 들어가면 색상이 빨간색으로 바뀌고, 안으로 들어가면 색상이 파란색으로 바뀌는 것입니다.
그러나 특정 li를 선택하면(즉; , 클릭), 다음 li를 클릭할 때까지 이 li가 빨간색으로 남아 있기를 바랍니다. 마우스가 다시 통과하여 제거 이벤트가 발생하더라도 다른 li를 클릭할 때까지 여전히 빨간색으로 유지되어야 합니다.

다음은 내 코드입니다. 클릭한 후 li을 밖으로 이동하면 색상이 파란색으로 유지되지만 클릭한 li를 다시 안팎으로 이동하면 색상이 유지되지 않습니다. 빨간색이 되고 파란색이 됩니다.

누구든지 문제 해결을 도와줄 수 있나요 =-= 미리 감사드립니다

으아악

Answer 1

CSS의 위치를 ​​변경하면 효과를 얻을 수 있습니다. 나를 믿지 않는다면 시도해보십시오. DEMO 나중에 시간이 나면 하나 써보겠습니다.

js는 어느 것을 클릭할지 구분할 뿐입니다

Answer 2

시각적으로는 클릭 시 추가된 클래스에 !important가 추가되어, 입주 시 추가된 다른 클래스의 우선순위가 클릭 시 추가된 클래스보다 낮습니다~

Answer 3

css

으아악

js:

으아악

Answer 4

초대해주셔서 감사합니다

HTML:

으아아아

CSS:

으아아아

자바스크립트:

으아아아

이런가요?