javascript - 마우스를 이동할 때 요소의 색상을 변경하고, 멀리 이동할 때 복원하는 JS 네이티브 코드를 가르쳐주세요.

Question

버블링 이벤트를 배우고, 코드를 입력하고, 온라인 기사를 기반으로 작은 세부 사항을 변경했습니다. 질문이 있습니다.

1. 최종 목표는 마우스가 위로 움직일 때 색상을 변경하는 것입니다.

2. 다음 li 요소를 클릭하면 이전에 클릭한 요소의 색상이 복원되는 문제를 해결하는 방법은 무엇입니까?
당신의 아이디어와 사용할 방법을 알려주세요. 나머지는 제가 직접 작성하겠습니다. 감사합니다!
PS: 책을 읽는 것은 쉽지만, 코드를 직접 작성하는 것은 헷갈립니다.

HTML 코드는 다음과 같습니다:

으아아아

JS 코드:

으아아아

Answer 1

1. CSS로 해결할 수 있다면 JS는 필요하지 않습니다. 질문의 아이디어는 hover 의사 클래스가 이 문제를 해결할 수 있다는 것입니다.
2 그런데 코드가 클릭 이벤트인데.. 좀 틀린데요.. 그럼 이벤트 프록시를 작성했으니 리가 많지 않을 때 하위로 작성해서 직접 리를 동작시켜보겠습니다

으아악

폐쇄를 아시나요? 전역 변수를 오염시키지 않고 클로저를 사용하기 위해 먼저 작성하는 방법은 모든 li의 색상을 직접 지우고 현재 클릭된 li에 색상을 추가하는 것입니다.

두 번째 작성 방법은 요소 획득 및 종료에 대해 다시 외부에 동일한 코드를 작성하지 않겠습니다. 으아악

두 번째 방법은 이전 방법을 지우고 현재 리에 색상을 추가하는 것입니다. 이에 비해 두 번째 방법의 성능이 약간 더 좋고, 첫 번째 방법이 이해하기 더 쉽습니다.

ps: 하지만 그래도 이벤트 프록시 작성 방법을 권장합니다.

Answer 2

1. CSS는 왜 안되나요~

2. mouseenter 및 mouseout 이벤트를 사용할 수 있습니다

Answer 3

마우스를 위로 올렸을 때 색상을 변경하려면 주로 CSS를 사용해야 하는데, pseudo class:hover를 하면 됩니다.
클릭하면 두 가지 아이디어가 나옵니다. 1. ul 아래의 모든 li 색상을 복원하고 e.target을 빨간색으로 변경합니다.
2. 이전 대상을 저장하려면 클릭하고, 이전 대상의 색상을 복원하려면 클릭하면 현재 대상이 빨간색으로 변합니다

Answer 4

마우스를 위로 올리면 색상이 변경됩니다. 호버 이벤트를 사용하면 어떨까요?

Answer 5

1. xx에서 위로 이동하고 yy로 아래로 이동하는 경우 먼저 CSS의 hover 의사 클래스 사용을 고려하세요.

기본 속성을 클래스 이름으로 저장하고 변경된 속성을 다른 클래스 이름으로 저장합니다. 클릭 콜백 중에
2. 기본 클래스를 제거하고 변경 클래스를 추가한 다음 해당 형제 요소를 순회하여 변경 클래스를 찾습니다. , 찾은 후 변경 클래스를 제거하고 기본 클래스를 추가하면 괜찮을 것입니다 ~

   $(this)

Answer 6

으아악 으아악

Answer 7

hover(함수(){

으아악

},함수(){

으아악

})