간단한 사냥 효과가 모바일 사파리에서 작동하지 않습니다.

HTML 웹 사이트에서 일부 이미지로 간단한 호버 효과를 만들기 위해 노력하고 있습니다. 계획 : 이미지 위로 마우스를 이동하면 이미지가 음영 처리되고 일부 세부 사항이 나타납니다. CSS 코드는 여기에 있습니다.간단한 사냥 효과가 모바일 사파리에서 작동하지 않습니다.

/* Hover overs */ 

.folio4:hover .face { 
    opacity:1; 
    cursor: pointer; 
}                   
.folio4:hover img { 
    opacity: 1; 
} 
.folio4:hover h2 { 
    opacity: 1; 

} 

.folio4:hover a.icon { 
    opacity:1; 
    transform: translateY(75px); 
    -webkit-transform: translateY(75px); 
    -o-transform: translateY(75px); 
    -ms-transform: translateY(75px); 
    transition: 500ms; 
    -webkit-transition: 500ms; 
    -o-transition: 500ms; 
    -ms-transition: 500ms; 

} 

.folio4:hover a.icon2 { 
    transition: 500ms; 
    -webkit-transition: 500ms; 
    -o-transition: 500ms; 
    -ms-transition: 500ms; 
    transform: translateY(75px); 
    -webkit-transform: translateY(75px); 
    -o-transform: translateY(75px); 
    -ms-transform: translateY(75px); 
    opacity: 1; 

}

그것은 모바일 사파리를 제외한 모든 브라우저에서 작동합니다. 이 기능이 작동하려면 어떻게해야합니까? 미리 답변 해 주셔서 감사합니다.

출처

2014-02-26 Kostenko

모바일에서는 마우스 오버 상태를 사용하지 않는 경향이 있습니다. ''초점을 맞췄습니까? 또한 스택에 transform/transition ** last **의 접두사가없는 버전이 있어야합니다. –

내가 아는 한, 호버 효과는 컴퓨터에서 알 수 있듯이 시스템이 호버 효과를 볼 수 없기 때문에 모바일 장치에서 작동하지 않습니다. 할 수있는 유일한 방법은 페이지의 반응 형 디자인에 대해서만 클릭 효과로 호버 효과를 설정하는 것입니다. 따라서 사용자는 그림을 탭하여 세부 정보를 가져와야합니다. 이것이 해결책이 아니면 죄송합니다.

출처

2014-02-26 12:35:16 DickDonDiamond

그게 좋은 생각입니다. 마우스 오버 효과를 클릭 효과로 바꾸려면 어떻게해야합니까? – Kostenko

css에서 휴대 기기를위한 추가 수업을 작성하세요. 예를 들어 화면이 500px보다 작은 경우 그 규칙은 html에 사용됩니다. 내가 준비된 코드로 당신을 도울 수 없다는 점에 유감 스럽지만, 현재 나는 당신을 위해 글을 쓸 시간이 없다. HTML의 반응 형 디자인을 위해 google을 시도하고 휴대 기기 용 CSS 예제를 찾습니다. 코드는 기본적으로 항상 동일합니다. 위에서 언급 한 것처럼 코드는 처음에는 뷰포트가 최대로 크게 허용됩니다. , 규칙이 활성화 될 때보 다 사용자 인터페이스가 CSS에 적합 할 때 – DickDonDiamond

간단한 사냥 효과가 모바일 사파리에서 작동하지 않습니다.

답변

관련 문제