CSS Pseudo Classes
You must have seen in certain websites that as you move your cursor from one link go the other , the color of the link at which you are hovering changes or a pointer points to that link . This effect is achieved as :
#nav1 a:hover {
background: url(images/b.gif) no-repeat left center;
color: #118877;
}
So, as you hover over a particular link , the icon b.gif points to that link and the color changes to #118877 .
:hover is called a dynamic pseudo-class as it changes properties of objects in real time .
Another way to differentiate between current link that user is viewing and the other links is to place a cursor over the current link :
#nav1 .icon a, #nav1 .icon a:hover, #nav1 .icon a:active {
background: url(images/b.gif) no-repeat left center;
color: #FFF;
cursor: default;
}
Let's add some of the links to our web pages within the division "welcome" as :
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<p>We are a group of movies freak who watch some insane number of movies round the clock .If you are new to our blog the begin from
<a href="index.html">Home</a> . This is the list of our <a href="recently-reviewed.html">Latest</a> reviewed movies . These are the
<a href="highly-recommended.html">Greatest</a> movies we have ever reviewed . We'll review each and every movie for you so that you
can find out which one is for you to watch .Know more<a href="about.html">About Us</a> here .</p>
</div>
How can a user know which of these pages he has already visited and which he's yet to visit ? Styling schemes are used for this purpose .
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: none;
background: white;
}
body {
color: #800080;
font-family:"Times New Roman", sans-serif,Verdana;
font-size: 75%;
}
a:link {
color: #112233;
}
a:visited {
color: #223344;
}
a:hover {
color: #334455;
}
a:active {
color: #556677;
}
a:visited - dynamic pseudo class for links already visited .Color changes to #223344 .
a:active - link at which we are currently positioned .Color changes to #556677 .
You must have seen in certain websites that as you move your cursor from one link go the other , the color of the link at which you are hovering changes or a pointer points to that link . This effect is achieved as :
#nav1 a:hover {
background: url(images/b.gif) no-repeat left center;
color: #118877;
}
So, as you hover over a particular link , the icon b.gif points to that link and the color changes to #118877 .
:hover is called a dynamic pseudo-class as it changes properties of objects in real time .
Another way to differentiate between current link that user is viewing and the other links is to place a cursor over the current link :
#nav1 .icon a, #nav1 .icon a:hover, #nav1 .icon a:active {
background: url(images/b.gif) no-repeat left center;
color: #FFF;
cursor: default;
}
Let's add some of the links to our web pages within the division "welcome" as :
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<p>We are a group of movies freak who watch some insane number of movies round the clock .If you are new to our blog the begin from
<a href="index.html">Home</a> . This is the list of our <a href="recently-reviewed.html">Latest</a> reviewed movies . These are the
<a href="highly-recommended.html">Greatest</a> movies we have ever reviewed . We'll review each and every movie for you so that you
can find out which one is for you to watch .Know more<a href="about.html">About Us</a> here .</p>
</div>
How can a user know which of these pages he has already visited and which he's yet to visit ? Styling schemes are used for this purpose .
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: none;
background: white;
}
body {
color: #800080;
font-family:"Times New Roman", sans-serif,Verdana;
font-size: 75%;
}
a:link {
color: #112233;
}
a:visited {
color: #223344;
}
a:hover {
color: #334455;
}
a:active {
color: #556677;
}
a:visited - dynamic pseudo class for links already visited .Color changes to #223344 .
a:active - link at which we are currently positioned .Color changes to #556677 .
