Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to change the link color with pseudo class hover in CSS

This tutorial explains the process to obtain mouseover or hover effects on the links present in a website.

If one were to navigate or move the mouse over the links on any website, it will be noticed that they are highlighted with a different colour. We will see in this tutorial as to how we can achieve such mouseover or hover effects with the links present on the website.

Pre-requisites before you begin:

We assume here that you are aware of the process to come up with a website and would have worked on the same as well. Else please have a glance on the same to get yourself equipped on the process to create a website.

The tutorial also intends to code directly in HTML and CSS. One should have a prior knowledge what CSS is. Also it will be good in case you are aware of the process to incorporate CSS code into your site.

Cascading Style Sheets (CSS) Code to Highlight Links on MouseOver

The below code snippet displays the default style that you will find in majority of the browsers for a link.

Listing 1: Default style of link

a:link {
  color: blue ;
  background-color: transparent ;
  text-decoration: underline ;
}

Talking about the a: link portion, it basically refers that the block following, enclosed in the curly brackets, needs to be applied to links. Each line in the block provides a rule. The line beginning color provides the details that on the browser that the anchor text of the link needs to be blue. The "transparent" value that is provided to the background-color reflects that whatever was in the background, it will be visible below the link text and this includes its existing colour as well. The text-decoration value of "underline" leads or makes the browser to provide the text with an underline. In case you are looking to style the link in the condition when the mouse is hovering over it, you just need to insert rules for a:hover. Let us look at the following example.

Listing 2: changing style

a:hover {
  color: black ;
  background-color: #def ;
}

As per this rule, this will cause the link to have black text on a background with a colour defined by the RGB value #def. The effect of the same can be seen by hovering your mouse over any of the links.

For the developers or readers of this tutorial, in case you are not familiar with RGB colour values, they are nothing but a set of three colours, red, green and blue. These colours when put together define the final colour you require. For the reason that browsers identifies only a very restricted subset of colour names, now just in case if you want any colour more obscure compared to the run-of-the-mill "blue", "black", "white" and the like, the best thing you can do is to define them making use of an RGB value. One does not require remembering the data or values though for the reason that majority of the programmers have a colour picker that will assist in coming up with the correct value for you.

Of course, the colour selection should be made that best suits the design of your website.

How to Generate the Hover Effect Only for Specific Links

Just in case you are looking for few specific links to represent the mouseover highlighting effect, it can be done by applying those effects to few classes.

Listing 3: Applying special effects

a.specialeffects:hover {
  color: black ;
  background-color: #ff0 ;
}

The code written above will make the links of the class "specialeffects" to reflect black text against a yellow background when the mouse is over it. In order to utilize it, make your links like the following:

Listing 4: Using the class specialeffects

<a class="specialeffects">this link will turn yellow</a>

This means that, the links to which you want to give the highlighting effect should be provided with the "specialeffects" class.

There is absolutely no issue in naming your classes anything you desire, and not just "specialeffects". The only thing you need to watch out for is that whatever name you select; make sure the name you provide in your HTML link matches that in your CSS rules.

How to eliminate the Underline from Links

The following rule can be added if you don't want your links to be underlined. You must use the text-decoration: none;. There are other options, but in our example we will use this.

The code might look like as below in case you don't want any of your links to be underlined:

Listing 5: Removing underline

a:link {
  color: blue ;
  background-color: transparent ;
  text-decoration: none ;
}

But, make sure that before you hurry to eliminate the underlining from all your links, links that are blue and underlined are well-established as a standard on the Internet. Anyone who recognizes a blue underlined text on a site by default gets the feeling that it signifies a clickable link. Altering the colour of your links and remove the underlining may make the users or visitors not even realise that the link can be accessed to gather more details, mistaking it for an attempt at creating a colourful page. Putting just a cute picture as well beside the link to make an attempt to indicate that it is a link may also be ignored by majority of the people considering that is just a decorative picture and not realise what it actually signifies. This is for the reason that there is no globally familiar method of graphically representing a link other than making use of blue underlined text.

This doesn’t mean that all that you need to be stuck with the blue underlined text for links. This is just to make you aware of the negative impact that could bring to you on changing the defaults that everyone expects. You should come up with a promising underlining anyway or by other means to compensate for the lack of visual cues for your links.

Conclusion

So we have completed the tutorial and learnt about the process to add mouseover effects to your links which is fairly easy. You just need to incorporate the code mentioned above, alter or modify it to adjust it to your site's design. Your links will now have an altogether a different appearance or colour scheme when the mouse moves over it.

I hope you liked, see you next time.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login