Examining the hover effect and layout styles on the Tours page


show more Examining the hover effect and layout styles on the Tours page provides you with in-depth training on Developer. Taught by Joe Marini as part of the Mobile Web Design & Development Fundamentals show less
please wait ...

Examining the hover effect and layout styles on the Tours page

Okay, let's examine the Tours page and the differences between making the tours page work on desktop and mobile. So here is the Tours page, and just as a quick reminder, I'm going to resize this down to the mobile size. And you can see that as I scroll down the page, there is a single column, and we've already fixed our navigation across the site. So here is each one of the tours, and you can see that the tour information for each one of these guys has been collapsed down so that only the logo for the tour is visible.

And the way that it gets revealed is if I move my mouse over it, you'll see that as I hover and unhover, the content is being shown in hidden. Now you might be saying to yourself, "Well, wait a second. That's not going to work on mobile because there is no hover event." Well, it turns out that mobile browser is actually sort of fake the hover event. When you put your finger down on a clickable element, mobile browsers will send the hover message...

Examining the hover effect and layout styles on the Tours page
Video duration: 6m 42s 5h 47m Beginner

Viewers:

Examining the hover effect and layout styles on the Tours page provides you with in-depth training on Developer. Taught by Joe Marini as part of the Mobile Web Design & Development Fundamentals

Subjects:
Developer Web
Software:
HTML
Author:
please wait ...