Name: CSS and HTML 5 - Hover Formatting
Uploaded: 2020-03-26T17:40:14.000Z
Duration: 18 min 37 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

Adverbs of degree

Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back, as you know why I'm Eli the computer guy, and in today's class, I'm going to show you how to use CSS to modify your formatting of text and images based off of if somebody is using their mouths and hovering over those text or images.

So this could be a useful way to give a little bit of, ah, pizazz to your website or your HTML document, or simply make it easier for your visitors for your users to be able to understand what's going on, eh?

So basically what we're going to be doing today is we're gonna be using P tags were going to be using T R tags, and then I'm going to be showing you how to do this with images.

And basically what's going to happen is if you highlight over AP tag, it is going to have a background color of grey.

Oh, somebody else should probably see this.

I can put the mouse over that p tag area.

And then I could say, Hey, hey, read this.

And then when the person comes over, they're not going to like, uh, what do you mean by this?

You can hover over the paragraph and it will be great.

Or again if you're going to be doing things like looking at reports and you have a table, one of big problems with tables.

If you get a big table, you got a lot of columns.

You're just simply looking at it, trying to discern some information.

One of the issues, especially on a computer screen, is it could be difficult to determine what information is in a particular row.

So if that entire row turns to a color when you hover over it, it's easy to use your mouse and just kind of roll down the rows me later.

Okay, that information looks good, and that information looks good.

And so if you have that entire row highlighted, it makes your life a lot easier than when we get to emit his.

This is just something that you can use to give a little pizazz a little pop to your HTML document, and what I'm going to be showing you today is I'm going to have a single image.

So let's say you have a single image on your HTML document, and when you roll over it, it's simply going to get bigger, and it's going to have a border around it.

So let's let's say is, let's say you have, like, little small images in your document and maybe for, like, diagrams something like that.

And so maybe most people are just going to skip by.

They're not going to really care about looking at the diagram, so you want to make it small s so that it doesn't disturb the flow of when people read your HTML documents, but they're going to be some people that are actually gonna be interested in that diagram of that image.

And so what you can have is they can roll over that image and then that image can get larger on emphasis.

Could be brought to it so people would go.

That's what this person is talking about here on.

And then I'm gonna show you, creating a very basic image gallery.

We're gonna have a lot of images in a row.

And then again, when you roll over one of the images in that gallery, it will get larger s so that you can look at it a little bit better.

You're saying when you hover over some tag some element within your HTML document, you want the CSS styling to be modified and to show up in a different way, and that will actually give you a bit of a dynamic website so that let's go over the computer and I can show you how this works.

So here we are, back in my demonstration machine again.

I'm using a Mac book and I wrote this code in text edit.

But all you need is a basic asking text editor.

So if you're in the Windows world, you can use note pad in the Mac world, even use text at it.

And if you're in the Lenox World, you can use G edit nano vim, whatever you want.

We have two documents for this project today.

One is going to be the hover dot HTM mouse is actually the document that you're going to double click, and it's going to open up with the Web browser and then that is going to be pointing back for CSS to hover style Nazi SS.

So this will be our CSS style sheep before actually go and start showing you the code.

I figure probably be best if I show you the demonstrations.

And so here I have a demonstration of different examples of what can be done when you hover over an element or a tag in the HTML with CSS eso up here, I have some P tags so appear the 1st 3 things I have RP tags.

And when these P tags, what you'll notice is if I hover over at the P tags, the background color goes to grave.

So again, think about this from a user experience perspective.

Imagine if you have some kind of technical documentation or you have some kind of report.

You see something of interest you want a coworker to to read it, see what their feelings are about it.

And basically, instead of simply pointing them at the screen or getting your fingers on the screen or whatever else to show them what you're talking about with this, basically, you can have the CSS.

You can simply hover over that particular paragraph.

Uh, what do you think about this paragraph?

Do you think this is something that we should care about?

And when they come over and take a look, they're not going to have to guess at what?

They can obviously see Oh, that's being highlighted.

Whatever else, we're gonna go down here, and I also created a table.

Tables are big deals, especially like in the i o t world.

When you're dealing with reports, imagine if you have a lot of sensors.

Imagine if you have a lot of information coming in and then you're spitting out a table so that an end user can then see what the results are.

One of the problems you run into is with these tables.

And so somebody is trying to scan through and take a look at all of this, information a table and try to figure out what's important and what's not.

Simply by being able to hover over a row and have that entire Roby highlighted that can make their life a lot easier.

Saying, Okay, this is this is row one item one Good.

Subtitles ListPlay Video

CSS and HTML 5 - Hover Formatting

perspective

entire

essentially

incredibly