크롬 CSS 호버 스타일을 적용하지 않습니다

Question

구글 크롬에서

, 마우스 왼쪽 버튼을 누르고 있으면 여기에 같이 CSS 호버 상태가 트리거되지 않는 :

a:hover { 
 
    color: red; 
 
}

<a href="http://www.jsfiddle.net">words</a>

http://jsfiddle.net/RHGG6/1/

이 문제는 FF8 또는 IE9 중 하나에서 발생하지 않습니다 . 드래그 앤 드롭 작업을 구현하고 CSS를 사용하여 드롭 대상을 강조 표시하기 때문에 문제가 발생합니다. JavaScript에서이 작업을 매우 간단하게 수행 할 수는 있지만, 본질적으로 CSS 문제 인 경우 무거워 보입니다. 이에 대한 해결 방법이 있습니까?

Answer 1

Chrome 17.0.948.0 (개발자 빌드 111321) Ubuntu 10.04를 사용하여 마우스 오버 할 때 링크가 빨간색으로 바뀌므로 Chrome을 업데이트해야 할 수 있습니다. 관련 참고 사항 : : hover 의사 클래스는 마우스 포인터로 HOVERED중인 요소에 적용됩니다. 링크를 클릭하는 동안 마우스 버튼을 누르고있는 동안 스타일을 적용하려면 : active 가상 클래스를 사용하십시오. FF와 IE가 왜 다르게 작동하는지 나는 잘 모르겠습니다.

Answer 2

마우스 왼쪽 버튼을 눌렀을 때 요소가 활성 상태라고 가정하지 않습니까? 차이점은 Firefox와 IE는 활성 상태가 마우스 오버 상태에서 상속 될 수 있으며 Chrome은 그렇지 않다는 점입니다. CSS에서 : active 상태는 : active 가상 클래스를 사용하여 제어 할 수 있습니다. 브라우저간에 일관성을 유지하려면 활성 상태의 스타일을 명시 적으로 설정해야합니다.

Answer 3

사파리와 오페라도 확인했는데 IE9와 Firefox처럼 작동합니다. Chrome이 이러한 방식으로 작동하는 유일한 브라우저 인 것으로 보입니다. 내가 원하는 동작을 얻을 수 있었던 유일한 방법은 Javascript를 사용하는 것이 었습니다. : active pseudo 클래스의 제안은 분명히 작동하지 않는다. 나는 그들이 문제를 오해하고 있다고 생각한다. 이상하게, 마우스 오른쪽 버튼을 누르고있는 동안 크롬에 마우스를 올리면 왼쪽 버튼을 누르지 않아도 작동합니다. 그림을 이동.

Answer 4

당신은 : active 의사 클래스를 찾고 있습니다. : 호버는 노드가 마우스로 가리켜 질 때만 활성화됩니다. : 활성은 노드가 선택되거나 클릭 될 때만 트리거됩니다.

다음은 jsFiddle의 : 조금 재생에서 http://jsfiddle.net/RHGG6/21/

Answer 5

주위에, 요소 위로 이동하면 왼쪽 버튼을 누르고있는 경우는 Windows7에 크롬 30.0.1599.69의 m은 mouseenter 이벤트를 생성하지 않는 것 같다. 따라서 onmouseenter 이벤트를 사용하면 css를 사용하는 것과 동일한 결과를 얻을 수 있습니다. 아마도이 (트리거되지 않은) 이벤트는 CSS 엔진에 변경해야하는 신호를 보내는 데 사용됩니다.

아무튼, mousemove 및 mouseout 이벤트를 처리하는 코드를 추가 할 수 있습니다. 클래스를 토글 한 것이 더 나은 옵션 일지 모르지만 간단히 js로 텍스트 색상을 설정합니다. 적어도 js는 css가 사용 했어야하는 시간을 사용할 것이므로 마우스가 움직일 때마다 모든 것을 재실행하지만 모든 오버 헤드가되지는 않습니다.

아마도 제거하려는 핸들러 내부에서 removeEventListener를 사용할 수 있습니다. 그렇다면 js를 첨부하여 addEventListener로 이벤트를 처리하고 페이지로드시 두 이벤트에 첨부 할 수 있습니다. onmousemove 이벤트가 트리거되면 스타일을 변경 한 다음 핸들러를 제거 할 수 있습니다. 그런 다음 mouseout 이벤트가 발생하면 스타일을 복원하고 onmove 핸들러를 다시 부착 할 수 있습니다. 이벤트에서 핸들러를 제거하려고 할 때 핸들러 자체에서 실패 할 경우에는 놀라지 않을 것이지만, 시도 할 수는 있습니다.그것은 단지 js에 몇 바이트를 추가 할 것이지만, 엄청나게 (전체 페이지가 아닌 링크의 관점에서) 효율성을 향상시킬 것입니다 - 마우스가 링크를 통해 100 %로 많이 옮겨지면 잠재적으로 매우 열악합니다. 즉 스타일 정확히 한 번만 설정되고 입장/퇴장주기마다 정확히 한 번 삭제됩니다.

<a href="http://www.jsfiddle.net" onmousemove = "this.style.color='red'" onmouseout = "this.style.color=''">words</a> 

저의 작품 - 참고 : win7의 크롬 만 테스트했습니다.