이 사이트는 어떻게 오버 헤드 오버레이를 구현합니까?

저는 CSS와 js 놈입니다. 나는 500px.com, pixoto.com, pinterest.com에서 마우스 오버시 div 오버레이를 수행하고, 이미지 나 투표 버튼에 대한 정보를 공개하는 등의 작업을 수행하고 싶습니다.이 사이트는 어떻게 오버 헤드 오버레이를 구현합니까?

I 'm pretty 내가 mouseover에서 chrome> script> 이벤트 리스너 중단 점을 넣었으므로 아무 것도 트리거하지 않기 때문에 js를 사용하지 않을 것입니다.

원래의 HTML 마크 업은 "li"또는 "div"내부에 배치 된 대부분의 경우 "img"태그 주변의 "a"태그로 최소화되었습니다. 즉, 대부분의 경우 나는 psuedo a : hover 클래스가 드러내는 숨겨진 div를 보지 못합니다. 크롬에서는 엘리먼트 "matched css"규칙을 검사 할 수 있지만, 거기에는 호버가 보이지 않는다.

물론이 전문 사이트에는 수천 줄의 CSS와 js 코드가 있으므로 내가 무슨 말을하고 있는지 확실히 말할 수는 없습니다. 그래서 나는 css hover가 트리거되는 방법과 css 클래스가 나타내는 도구가 있는지 궁금 할 것입니다.

출처

2011-10-13 Homan

도구가 검사라고 다음 줄을 검색 - 이미 ... 호버 클래스는 클래스의 이름을 어쨌든 알고 ... 자신의 스타일 시트를 통과 시도 screen.css 파일에서 - 크롬의 검사 요소를 사용하여 "검색"할 수 있습니다 :) – PhD

500px.com 사이트는 일반 CSS를 사용합니다.

불투명도를 0으로 설정하여 점수를 숨 깁니다. 불투명도를 가리키면 불투명도가 1로 설정됩니다.

자신의 CSS 파일을보고

.photos .thumb .info .right { 
    .... 
    opacity: 0; // this hides the score 
} 

.photos .thumb:hover .info .right, .photos .mobile_payment input.thumb:focus .info .right, .mobile_payment .photos input.thumb:focus .info .right { 
    opacity: 1; // this shows the score 
}

출처

2011-10-13 21:53:55 Stuiterbal

500px 사이트에서 jQuery 또는 일부 JS를 사용해야합니다.

파이어 폭스를 사용하고 있다면 "FireBug"라는 부가 기능을 사용하면 어떤 요소, CSS 및 js 파일도 검사 할 수 있습니다.

출처

2011-10-13 21:38:24 griegs

이 사이트는 어떻게 오버 헤드 오버레이를 구현합니까?

답변

관련 문제