Rollover Links Using CSS

    The rollover effects can be easily obtained via CSS pseudo-classes. It is the effect when you point your mouse over a certain HTML element. If you are not quite familiar with CSS, you might want to play the code by copy pasting it to your blog post and observe how things work.

    Text links can have an underline, change color or anything you want it to be. See some samples below.

I turn red when you hover your mouse on me.

I will have an underline when you hover your mouse on me.

I change size when you hover your mouse on me.

    A pointer on rollover effects, it is better off not deforming the rest off the contents through changing the link through size, weight etc. This can potentially irritate the readers. Below are the CSS codes for the samples.

Show or Hide First Sample Code

First Sample
Code:

#RolloverSample1{
    color: #0099ff;
}

#RolloverSample1:hover{
    color: red;
    text-decoration: none;
}

Show or Hide Second Sample Code

Second Sample
Code:

#RolloverSample2{
    color: #0099ff;
}

#RolloverSample2:hover{
    text-decoration: underline;
}

Show or Hide Third Sample Code

Third Sample
Code:

#RolloverSample3{
    color: #0099ff;
}

#RolloverSample3:hover{
    font-size: 20px;
    text-decoration: none;
}

    You see, when you declare a :hover pseudo-class for an element in the stylesheet, it can have a completely different style from before. Though it will inherit all the style of the non hover version, the properties declared in the hover version will overwrite the ones from the non hover version.

    Now, how is this important to your blog? For starters some users won't be able to target their cursor at the specified point they want to most of the time. The hover gives a good style and functionality in telling the user that their mouse is hovered on a specific link.