Friendly CSS3 Course #Part 3- Working with event selectors and state selectors
Deprecated: Function create_function() is deprecated in /home/vhosts/poweredbygnulinux.com/wp-content/plugins/codecolorer/lib/geshi.php on line 4698
Using event selectors
Event selectors choose objects based on a particular event, such as a mouse over.
- When the user hovers the mouse pointer over an object, the object’s formatting changes
- When the user moves the mouse pointer off of the object, the formatting returns to normal
:hover
Selects an object when the mouse pointer is hovered over it.
show that an item is selected or to display details about an object
:focus
Selects an object when the object has the keyboard focus
used with forms to show which field is selected
Using our previous example files , lets add the CSS styles and see the output.
p:hover , h1: hover
{ text-decoration:none;
font-family: "Arial", sans-serif;
font-size: xx-large;
color: BlueViolet;
background-color: Plum;
}
When you hover p o h1 they will change to the event selected style.
Working with state selectors
Example: When the user clicks that link, the state of the link changes to “visited.”
Using state selectors
State selectors can change the appearance of the document to match activities that the user has performed.When the user clicks a link, the state of the link changes to “visited.”
:link
Styles all of the unvisited links in a page
a:link
where the formatting would affect all of the unvisited anchor links
img:link
where the formatting would affect all of the unvisited image links
:visited
all of the visited links
:active
the link that the user currently has selected
:empty
an object that has no content
:target
changes the target of that is currently selected.
:enable
:disable
:checked
::selection
content that the user has highlighted in some way
Write this HTML and CSS based on previous examples.
<html>
<head>
<title> A testing page </title>
<link rel ="stylesheet" href="test6.css" />
</head>
<body>
<h1>Our heading </h1>
<p>Simple text to go with the heading </p>
<a href="#one"> Select One </a> <br />
<a href="#two"> Select Two </a> <br />
<a href="#three"> Select Three</a>
<p id="one">One</p>
<p id="two">Two</p>
<p id="three">Three</p>
</body>
</html>
::selection
{
color:Black;
background-color: Green;
}
::-moz selection
{
color: Black;
background-color: Green;
}
:target
{
border: solid;
border-width: medium;
border-color: Red;
background-color: #00abff;
}
When you click on a link , then changes the target below.
Also , when you select something , CSS changes its color.
Finally a summary in a mindmap
Download PDF Mindmap
Previous Chapter
Next Chapter
