2017-11-24 20 views
1

순수 CSS 팝업 컨텍스트 메뉴를 구현하고 Chrome에서 제대로 작동하도록하려고하지만 FireFox가 저를 곤경에 빠뜨립니다. 버튼을 집중하여 메뉴를 열 수 있습니다. 그러나 Chrome에서 작동하는 커서 및 마우스 오버 효과는 Firefox에서 발생하지 않습니다. 그것은 보이지만 파이어 폭스는 그렇지 않은 것처럼 행동한다.Firefox가 호버를 인식하지 못합니다.

나는 그것을 보여주는 jsfiddle가 여기에 있습니다 : 버튼에 초점이 맞춰지면

nav button:focus nav { 
    visibility: visible; 
    opacity: 1; 
} 
nav li a:hover { 
    background-color: #b0e0e6; 
    transition: none; 
} 

첫 번째 선택은 탐색을 볼 수 있습니다 : https://jsfiddle.net/jeffmarston/j1c9x9mL/

의 핵심은 다음과 같은 CSS입니다. 두 번째는 이어야합니다.은 항목을 올리면 배경색이 변경되지만 Chrome에서만 작동합니다.

답변

0

버튼 요소 외부에서 nav를 움직이는 것이 트릭을 만들었습니다.

0

클릭 버튼을 :focus으로 수신하려면 모든 브라우저에서 아직 sudo 클래스가 표준이 아닙니다.

자세한 내용은 mdn을 확인하십시오.

"클릭하고 집중"섹션으로 이동할 수 있습니다.