August 4, 2016

Pseudo-Classes: Hover Effects

pseudo-classes

Pseudo-Classes

We are working with pseudo-classes today. This will be split up over a few tutorials as there is a lot to cover. A pseudo-class is used to define a certain state of an element. For example, when an element is hovered over, an active link, or when a text field gets focus. We’ll cover these things over the next few examples. Before we begin, see how a pseudo-class is added in the example code below.


selector:pseudo-class {
  property:value;
}

In the code above, you can see that a pseudo-class is added with a ( : ) followed by the class name. NOTE: There are no spaces until after the selector/class name and right before the opening curly bracket ( { ). This is another one of those strict coding standards. It is considered good coding practice to add a space before the opening curly bracket. We’ll start with one of the most common types of elements to add a pseudo-class to. And that is the anchor element (hyperlink). See the images below.

index.html Example 1 :Pseudo-Class States

pseudo-classes

my-styles.html Example 1 :Pseudo-Class States

pseudo-classes CSS

BELOW ARE THE DISPLAYS OF THE DIFFERENT STATES OF OUR BOOKMARK LINK

Displayed Page Example 1: Normal State

:link state normal pseudo class

Displayed Page Example 1: Hover State

:hover state pseudo class

Displayed Page Example 1: Active State (Clicked)

:active state pseudo-class

Displayed Page Example 1: Visited State (After Clicked)

:visited state pseudo-class


Displayed Page Example 1: Linked To H1 Bookmark

psuedo-classes linked to bookmark

We begin in our index.html by adding a paragraph element with an anchor element nested inside of it. We turn this a element into a bookmark by adding a hatch tag followed by the name “link” which will link to the h1 element with the matching id. You can learn more about bookmarks in the HTML LINKS lesson. We also add a bunch of line breaks in our paragraph element to simulate a long web page.

Moving on to the my-styles.css document, we have four CSS rules created. Each one has a pseudo-class added to the a selector. Each class defines the state that the link is in. I’ve added comments above each rule to better explain. The four states we are defining are :link, :visited, :hover, and :active. For each state, we are simply changing the COLOR of the link text. NOTE: It is important for these rules to be in this order for them to be effective. The :link and :visited must come BEFORE the :hover pseudo-class, and :active must come AFTER :hover.

You should now run the index.html document. The first thing to notice is the bookmark link color in its regular state is orange. When we hover the mouse over the link text, we enter the :hover state and the link turns purple. Next, if you click on the link and hold the mouse button, you can see it’s :active state which turns the text blue. Finally, after the link is clicked, we are taken to our bookmark which is the h1 heading. When you scroll back up to the link, it is now in its :visited state and has red text.

Psuedo-classes are used for many things. This is just a starting point and is one of the most common uses. The :hover state is probably one of the most widely used. Let’s squeeze one more example in before we finish this lesson. See the images below.

index.html Example 2: Hover Effect

hover effect HTML

my-styles.css Example 2: Hover Effect

hover effect CSS

Displayed Page Example 2: Normal State

hover effect normal display

Displayed Page Example 2: Hovered State

hover effects hover state

In the final example, we have added a DIV with a CLASS name of mouseover to our index.html. This will simply display the text “Hover Over Me!“. Over in our my-styles.css document, we have added two more class rules. The first one has a global selector of div. This rule will make the background-color green, font color white, center the text, and add 20 pixels of PADDING between the text and the BORDER. The second rule has a SELECTOR of div with a pseudo-class of :hover added to it. This rule will define the effects that we want to happen when our div is hovered over with the mouse. All that we have it doing is changing the background-color to blue. The Displayed Page images show our hover effect.

We will be working more with pseudo-classes over the next one or two tutorials. There is just too much to go over in one lesson. Hopefully, you have a good understanding of how pseudo-classes and hover effects work. Thanks for reading, I’ll see you next tutorial.

index.html Source Code


<!doctype html>
<html>
<head>
<title>Pseudo-Classes</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<div class="mouseover">Hover Over Me!</div>

<p><a href="#link">This is a link</a><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>

<h1 id="link">The link takes you to me</h1>

</body>
</html>

my-styles.css Source Code


/* color of normal/unvisited link */
a:link {
color: orange;
}

/* color of a visited link */
a:visited {
color: red;
}

/* color when link is hovered over with mouse pointer */
a:hover {
color: purple;
}

/* color of active/selected link */
a:active {
color: blue;
}

div {
background-color: green;
text-align: center;
color: white;
padding: 20px;
}

div:hover {
background-color: blue;
}

Clear Coded Programming

Please Leave a comment