The 'Hover' Tutorial
I've gotten some questions about the 'hover' property and decided that I should make a tutorial since its apparently a pretty tricky property.
Tutorial Info
Programs used; Web Developer
Knowledge of CSS needed; Moderate
Understanding the 'Hover' Selector
The :hover selector is not a difficult property to understand, the basic definition of hover means how an element changes, or doesn't change when you mouse over them. The tricky part comes in when you start applying the :hover selector combined with other properties and understanding how all those properties work together to form your creation. But first, lets start with a basic example: in this layout, you can hover over any blue link and it will change color. The hover property is denoted by a colon (:) and the word hover. It is a property that is attached to a link, and as you will learn can be applied to other properties.
Example,
a, a:link, a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
This means that the link will change from blue and not underlined, to red and underlined whenever a link is moused over.
In this second layout, we see the :hover selector being used in a different way. Instead of changing just the color of the navigation links, we now see it changing the style of the text as well.
It would look something like this, in the CSS.
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {color: #5674b9;}
div#header a:hover, div#footer a:hover {
font-style: italic;
font-family: georgia;
font-weight: normal;
color: purple;
text-decoration: none;}
The header and footer links will now appear purple, in Georgia font and italicized when you hover over them.
Outside the Link
The :hover selector isn't just a property that is exclusive to links, which is great because it can add neat effects to your layout. Let's begin with this example layout. While, the property is still being used for links, its being used in a non-traditional way. In this layout, hovering over the navigation changes the length of the background.
Which would look something like this:
ul.navheader li {
display: block;
font-family: courier new;
font-size: 12px;
text-align: left;
font-weight: lighter;
padding: 0 3px 0 3px;
background: #ffdf2d;
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 1px;
ul.navheader li:hover{width:13%;}
Furthermore, this layout shows how the hover selector can be applied an entire item, such as comment bar. In actuality, the bar and the actual comment link at 2 separate entities, much like most properties (header, sidebar, etc...). In this layout, the comment bar, by default is 'hidden', but we use the hover property to make it re-appear.
Looks something like this:
.comments {
font-family: "courier new", sans-serif;
font-size: 11px;
text-align: right;
background-color: #dcdcdc;
padding: 10px;
position: relative;
top: 44px;
margin-left: -10px;
width: 100%;
text-transform: uppercase;
background: rgba(0, 0, 0, .1);
opacity: 0;
}
.comments:hover{
opacity: 1; background: rgba(0, 0, 0, .1);}
So when you hover over the bottom of the entry, the comment bar will then appear.
Hover & Opacity
The Hover & Opacity properties are 2 that I like to use together often. Opacity is one way to changing the transparency of an item. In the previous example, the comment bar is completely hidden, until you hover over the area where the comment bar is supposed to appear. And in this layout, the images in the entries are all somewhat faded, however when you hover over them, they all turn to their normal opacity.
Like this:
.entry_text img{border: 1px solid #eee; padding: 10px; opacity: .60;}
.entry_text img:hover{opacity: 1;}
The highest value the opacity can take on is 1. It can go from 0-1, with any decimal in between. To learn more about opacity, read this.
Helpful Tips
Make Your Job Easier
As noted in a previous tutorial, I love using these tools when making layouts: Firebug & Web Developer.
In these two programs (I prefer, web developer), you can edit the CSS without ever having to manually update the layout. The web developer comes with more ways to understand a website, as well as other options to help create the website. As a layout maker, my job would be excruciatingly difficult if I didn't have these add-ons to help with the layout making process. If you don't use firefox, I highly suggest switching today.
Utilize Your Resources
Bookmark these websites: CSS Reference, Moz Extensions & CSS school
Each link provides extensive help on learning CSS. The first two focus on providing you with a plethora of CSS properties and give you examples on how to use them, and how to make them compatible for each browser. The last website gives you a breakdown of all the elements of CSS, as also gives you a way to try it for yourself so you can see how it works when applied to the CSS.
I can't stress these tips enough, the best way to learn is by experiment, experience, and trial and error. Tutorials like this one are for when you need that little push to help get you on your way, otherwise the best advice I can give is just to play around with the CSS and see what you can come up with and eventually you'll be writing tutorials like these for people who were once in your position.
If you have any question, I will be happy to entertain them. :)
Tutorial Info
Programs used; Web Developer
Knowledge of CSS needed; Moderate
Understanding the 'Hover' Selector
The :hover selector is not a difficult property to understand, the basic definition of hover means how an element changes, or doesn't change when you mouse over them. The tricky part comes in when you start applying the :hover selector combined with other properties and understanding how all those properties work together to form your creation. But first, lets start with a basic example: in this layout, you can hover over any blue link and it will change color. The hover property is denoted by a colon (:) and the word hover. It is a property that is attached to a link, and as you will learn can be applied to other properties.
Example,
a, a:link, a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
This means that the link will change from blue and not underlined, to red and underlined whenever a link is moused over.
In this second layout, we see the :hover selector being used in a different way. Instead of changing just the color of the navigation links, we now see it changing the style of the text as well.
It would look something like this, in the CSS.
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {color: #5674b9;}
div#header a:hover, div#footer a:hover {
font-style: italic;
font-family: georgia;
font-weight: normal;
color: purple;
text-decoration: none;}
The header and footer links will now appear purple, in Georgia font and italicized when you hover over them.
Outside the Link
The :hover selector isn't just a property that is exclusive to links, which is great because it can add neat effects to your layout. Let's begin with this example layout. While, the property is still being used for links, its being used in a non-traditional way. In this layout, hovering over the navigation changes the length of the background.
Which would look something like this:
ul.navheader li {
display: block;
font-family: courier new;
font-size: 12px;
text-align: left;
font-weight: lighter;
padding: 0 3px 0 3px;
background: #ffdf2d;
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 1px;
ul.navheader li:hover{width:13%;}
Furthermore, this layout shows how the hover selector can be applied an entire item, such as comment bar. In actuality, the bar and the actual comment link at 2 separate entities, much like most properties (header, sidebar, etc...). In this layout, the comment bar, by default is 'hidden', but we use the hover property to make it re-appear.
Looks something like this:
.comments {
font-family: "courier new", sans-serif;
font-size: 11px;
text-align: right;
background-color: #dcdcdc;
padding: 10px;
position: relative;
top: 44px;
margin-left: -10px;
width: 100%;
text-transform: uppercase;
background: rgba(0, 0, 0, .1);
opacity: 0;
}
.comments:hover{
opacity: 1; background: rgba(0, 0, 0, .1);}
So when you hover over the bottom of the entry, the comment bar will then appear.
Hover & Opacity
The Hover & Opacity properties are 2 that I like to use together often. Opacity is one way to changing the transparency of an item. In the previous example, the comment bar is completely hidden, until you hover over the area where the comment bar is supposed to appear. And in this layout, the images in the entries are all somewhat faded, however when you hover over them, they all turn to their normal opacity.
Like this:
.entry_text img{border: 1px solid #eee; padding: 10px; opacity: .60;}
.entry_text img:hover{opacity: 1;}
The highest value the opacity can take on is 1. It can go from 0-1, with any decimal in between. To learn more about opacity, read this.
Helpful Tips
Make Your Job Easier
As noted in a previous tutorial, I love using these tools when making layouts: Firebug & Web Developer.
In these two programs (I prefer, web developer), you can edit the CSS without ever having to manually update the layout. The web developer comes with more ways to understand a website, as well as other options to help create the website. As a layout maker, my job would be excruciatingly difficult if I didn't have these add-ons to help with the layout making process. If you don't use firefox, I highly suggest switching today.
Utilize Your Resources
Bookmark these websites: CSS Reference, Moz Extensions & CSS school
Each link provides extensive help on learning CSS. The first two focus on providing you with a plethora of CSS properties and give you examples on how to use them, and how to make them compatible for each browser. The last website gives you a breakdown of all the elements of CSS, as also gives you a way to try it for yourself so you can see how it works when applied to the CSS.
I can't stress these tips enough, the best way to learn is by experiment, experience, and trial and error. Tutorials like this one are for when you need that little push to help get you on your way, otherwise the best advice I can give is just to play around with the CSS and see what you can come up with and eventually you'll be writing tutorials like these for people who were once in your position.
If you have any question, I will be happy to entertain them. :)