Как эти сайты реализуют свои оверлейные наложения? - PullRequest
0 голосов
/ 14 октября 2011

Я css и js noob. Я хотел бы выполнить то, что сделали 500px.com, pixoto.com, pinterest.com, а именно выполнить наложение div при наведении курсора мыши, открывая информацию об изображении или кнопках для голосования, фейвинга и т. Д.

Я почти уверен, что они не используют js для этого, потому что я ставлю точку останова прослушивателя событий chrome> script> на мышь, и она ничего не вызывает.

Их оригинальная html-разметка минимальна, просто тег «a» вокруг тега «img» по большей части помещен внутри «li» или «div». то есть, в большинстве случаев я не вижу скрытых элементов div, которые раскрывает класс psuedo a: hover. В Chrome я могу проверять элементы на соответствие правилам CSS, но я никогда не вижу там парения.

Конечно, на этих профессиональных сайтах есть тысячи строк кодов css и js, поэтому я не могу точно сказать, что знаю, о чем говорю. так что мне просто интересно, есть ли инструмент, который показывает, как запускается css hover и каким классом css?

Ответы [ 2 ]

2 голосов
/ 14 октября 2011

Сайт 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
}
0 голосов
/ 14 октября 2011

Уверен, сайт 500px должен все равно использовать jQuery или JS.

Если вы используете Firefox, тогда получите дополнение под названием "FireBug", которое позволяет вам проверять любой элемент, его css и любые jsприкреплен к нему.

...