react :: 모바일에서 클릭(터치) 시 파란 하이라이트(highlight) 생기지 않게 하기

<a href=".."> 태그를 사용하여 특정 구역을 클릭했을 때 다른 페이지로 넘어가도록

onClick 이벤트를 구현했다.

 

웹에서는 아무 문제가 없어 보였는데

모바일에서 클릭(터치)하니 일시적으로 파란 하이라이트(그림자)가 생긴다.

 

위와 같이 원 모양을 클릭했을 때 파란 색으로 덮이는 현상.

 

 

이런 하이라이트 없이 클릭되도록 하기 위해서는

css에 다음 옵션을 추가해주면 된다.

 

.Panel {
  -webkit-tap-highlight-color: transparent;
}

 

참고로 hover 나 active 상태에 대한 css 가 적용된 경우 (.Panel:hover 또는 .Panel:active)

hover/active 속성에 적용하는 것이 아닌,

해당되는 클래스 자체의 속성에 넣어주어야 함!