Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Hover Links in CSS (part 1)
by GreyCobra.com
CSS Basic, CSS Codes
by Adam Priestley
Link Effects
by Lindsay Coome
Hover Links in CSS (Part 2)
by GreyCobra.com
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
HTML and CSS  Home HTML and CSS Tutorials Links and Styles
rss

Links and Styles

Author: Ades Tynyshov More by this author

Added: Jan 27, 2005 Rating:  Average Rating: 3.37 Votes: 43 Position: 4579 of 12257Average Rating: 3.37 Votes: 43 Position: 4579 of 12257Average Rating: 3.37 Votes: 43 Position: 4579 of 12257Average Rating: 3.37 Votes: 43 Position: 4579 of 12257Average Rating: 3.37 Votes: 43 Position: 4579 of 12257 Level: Experienced Software:  DreamweaverGoLiveFrontPage

1. As you know there are four states of a link, namely: Initial State, Visited State, Mouse Over State and Active State. For example if you were to put the following code between <head></head> tags in the page, all the link states in that page would be red. Which means when you visit the page you will see all the links in read, and when you click on them or hover on them you will not see any change. Because all the link states have been defined to be red. Let's take our tutorial from here.

<style type="text/css">
<!--
a:link { color: red; }
a:visited { color: red; }
a:hover { color: red; }
a:active { color: red; }
-->
</style>

2. How about if I want to make my links without underline when someone mouse overs on them? You just have to add a new state  text-decoration: none; to the a:hover area between {} braces.

a:hover { color: red;  text-decoration: none; }

Example: Mouse Over Me

So if you don't want to have underline on your links at all, just add  text-decoration: none; to all the 4 states and your links will not have underline.

3. How about adding a background to our links when somebody mouseOvers on them? For that you have to add background-color: to the hover state like this:

a:hover {
     color: red;
     text-decoration: none;
     background-color: #CCCCCC;
}

Example: Mouse Over Me

4. You can also change the cursor when somebody mouse overs on your link. Let's change the cursor to a help icon when somebody mouseOvers on our links.

a:hover {
     color: red;
     text-decoration: none;
     cursor: help; 
}

Example: Mouse Over Me

Other cursor states that you can use are:

  • auto
  • crosshair
  • help
  • move
  • pointer
  • text
  • wait
  • e-resize
  • ne-resize
  • n-resize
  • nw-resize
  • s-resize
  • se-resize

Be careful when you are using some of the cursor states on your links, because if they are used improperly it might confuse the users a great deal.



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Links and Styles"