홈>2020-03-18 14:12

html - 휴대 기기의 탭에 호버 스타일이 적용되는 이유는 무엇입니까?

내 버튼의 색상이 바뀌면 다음을 참조하십시오 :

button {
  background-color: orange;
}
button:hover {
  background-color: darkorange;
}

예 : https://jsfiddle.net/oepb5ks4/

데스크톱에서 잘 작동하지만 : 호버가 없어야하는 모바일에서 – 브라우저 *는 여전히 색상을 변경하지만버튼을 터치 한 후에

<올>

왜 그런 행동입니까? 뭔가 빠졌습니까? 모바일 브라우저에서 마우스를 가져 가면어떤의미가 있는가?

이를위한 훌륭하고 깨끗한 솔루션이 있습니까 (바람직하게는 미디어 쿼리 나 JavaScript가없는 경우)?

* Chrome ( "장치 모드") 및 iOS Safari에서 테스트되었습니다.

답변 # 1
CSS에서는 @media 를 사용하여 모바일 장치를 필터링 할 수 있습니다. 규칙 및 필터 (w3의 문서). "미디어에 호버 기능이있는 경우 호버 색상이 주황색이어야합니다"라고 말할 수 있습니다.
```
@media not all and (hover: none) {
    a:hover{
        color: orange
    }
}
```
또한 JS로 감지하고 모바일에서 항상 주황색이되도록 색상을 수동으로 조정할 수 있습니다.

PC에서 버튼을 클릭하기 전에 이전에 마우스를 올려 놓아야했기 때문에 문제가 발생했다고 생각합니다. 클릭하면 모바일에서 색상이 변경됩니다.

업데이트방금 Temani Afif의 질문에 따른 의견을 읽었습니다 : 분명히 :hover s는 :onclick 와 같은 것으로 "변환됩니다" 휴대 전화의 호버 기능이 없기 때문에 모바일에서 많은 웹 사이트가 호버 메뉴를 가지고 있으므로 모바일 사용자는 번역하지 않으면 액세스 할 수 없습니다.

또 다른 방법은 방문한 링크의 색상을 다음과 같이 강제하는 것입니다.
```
a:visited { 
  color: orange!important;
}
```
업데이트 2새 미디어 태그를 포함하고이 질문에서 다른 질문에 대한 조언을 얻었으며 사용하지 않는 방법 및 @media 규칙에 대한 의견입니다.