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
Selects an object when the mouse pointer is hovered over it.
show that an item is selected or to display details about an object
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
font-family: "Arial", sans-serif;
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.”
Styles all of the unvisited links in a page
where the formatting would affect all of the unvisited anchor links
where the formatting would affect all of the unvisited image links
all of the visited links
the link that the user currently has selected
an object that has no content
changes the target of that is currently selected.
content that the user has highlighted in some way
Write this HTML and CSS based on previous examples.
<title> A testing page </title>
<link rel ="stylesheet" href="test6.css" />
<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>
When you click on a link , then changes the target below.
Also , when you select something , CSS changes its color.