모바일 장치에서 CSS Hover

전방을 진술하기 위해 저는 처음 프로그래머입니다. 누군가가 페이지를 아래로 내릴 때 문제가 발생하면서 모바일 장치 용 이미지에서 마우스 오버 기능을 해제해야했습니다. 나는 프로그래머에게 upwork.com에서 그것을하도록 요청했고 그는 홈 페이지 이미지를 CSS를 통해 성공적으로 처리했다.모바일 장치에서 CSS Hover

그러나 이제는 새 이미지를 사용하여 새 이미지에 다른 섹션을 추가했습니다. 불행히도, 내가 사용했던 프로그래머는 그가 어떻게했는지를 나누고 싶지 않았지만, 우리가 그를 다시 고용하기를 원했습니다.

나는 이것을 스스로하는 법을 가장 잘 파악했다. 당신은는 "기능"이미지가 노트북에 가져가 있지만 모바일 꺼져 있는지 볼 수

foxandowlkids.com/index_postlaunch.html

페이지입니다. "다목적"이미지로 어떻게 이것을 수행 할 수 있습니까? 정직하게 말하면 어떤 CSS 파일을보아야하는지조차 알지 못합니다.

도움을 주시면 매우 감사하겠습니다!

출처

2017-03-17 denverowl

브라우저 개발자 도구를 사용하여 웹 페이지에서 수행중인 작업과 적용중인 CSS 파일/클래스를 검사하십시오. – Brino

라인 3478 및 효과를 일으키는 /www/css/style.css에서 3460 : 당신의 효과를 다시 쓰기 만 768px 이상의 화면 크기와 장치를 대상으로 이런 일을 보일 수 있습니다. 이를 사용하지 않으려면 @media 쿼리에서 해당 선언 (선택기 포함)을 래핑하거나 다른 파일에서이를 무시할 수 있습니다.

당신이 사용할 수있는 장소에 수정하려면 :

@media (min-width:768px) { 
    .works-grid.hover-white .work-item:hover .work-img:after{ 
    background: rgba(250,250,250, .9); 
    } 
} 
/* ... */ 
} 
@media (min-width:768px) { 
    .work-item:hover .work-img:after{ 
    background: rgba(20,20,20, .85); 
    } 
}

을하지만,있는 style.css에 개조가 손실 될 수 있기 때문에 내가 style.css 후로드 다른 스타일, 당신의 개조를 배치, 두 번째 옵션을 사용하는 것이 좋습니다 테마 업데이트를 사용합니다 (어린이 테마를 사용하는 경우는 제외). 그래서 여기에 당신의 자신의 스타일 시트에 배치 할 수있는 안전한 경로입니다 :

@media (max-width:767px) { 
    .works-grid.hover-white .work-item:hover .work-img:after, 
    .work-item:hover .work-img:after { 
     background-color: transparent; 
    } 
}

기회는 당신이 영향을받는 장치 또는 540px에 대한 정제를 포함 할 경우 992px의 768px 중단 점을 거래 할 수 있습니다 당신이 경우 단지 (대부분의) 스마트 폰으로의 변경을 제한하고자합니다.

그러나, 상황이 무의식적으로 거대 파괴의 기회로, 생산되지 않은 코드를 허용하는 것이 좋은 생각이다 명심하시기 바랍니다가. 일반적으로이 작은 것을 몇 달러 만 지불하면 다른 화면 크기 나 다른 장치에서이를 깨뜨릴 위험이 있습니다. 이는 코드 변경 내용, 적용시기 및 방법을 이해하지 않으면 매우 높습니다. 그것을 시험해 보라.

테스트 환경에서 원하는대로 연주하고 배우고 배우십시오. 그러나 고객의 웹 사이트와 브랜드 이미지가 고객의 눈 앞에서 신경 쓰이는 경우 제품에서 이해할 수없는 것을 변경하지 마십시오 (CSS, javascript 또는 php). 그것은 당신이 그것을 깰 수있을 경우의 문제가 아니지만, . 내 말을 믿지 마라. 원하는 10 명 이상의 개발자에게 당신과 어떤 관계도없이 답을 물어보십시오.

출처

2017-03-17 21:51:11

대단히 고마워,이 트릭을 아주 잘 했어! – denverowl

특정 사이트에서이 트릭은 해당 클래스를 <html> 요소에서 찾아야하는 것으로 보입니다. 일반 화면에서는 .no-mobile 클래스가 있습니다. 모바일 장치의 경우이 값은 .mobile로 변경됩니다.

는 CSS를 통해 이동하고있을 경우이 같은 물건을 찾습니다 모두의 앞에 html.no 모바일 선택이있을 수 있도록

.work-item:hover .work-img > img { 
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    -ms-transform: scale(1.05); 
    transform: scale(1.05); 
}

을 수정 상태가 가져가. 이렇게하면 '모바일'로 간주되지 않는 화면 만 타겟팅 할 수 있습니다. 수정 된 코드는 다음과 같이 보일 수 있습니다

html.no-mobile .work-item:hover .work-img > img { 
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    -ms-transform: scale(1.05); 
    transform: scale(1.05); 
}

분명히 사용자가 사용하는 장치의 종류를 확인하고 HTML 클래스를 업데이트 어딘가 스크립트가 있기 때문에 이것은 단지 귀하의 경우에 작동합니다 알고 바랍니다, 당신은 그것을 활용할 수 있습니다.

순수 CSS를 사용하면 미디어 쿼리를 작성하고 특정 장치 너비를 지정해야합니다.

@media (min-width: 768px) { 
    .work-item:hover .work-img > img { 
     -webkit-transform: scale(1.05); 
     -moz-transform: scale(1.05); 
     -o-transform: scale(1.05); 
     -ms-transform: scale(1.05); 
     transform: scale(1.05); 
    } 
}

출처

2017-03-17 21:47:01 DavyH

이 도움 주셔서 감사합니다! – denverowl

모바일 장치에서 CSS Hover

답변

관련 문제