CSS Element Hover Effect
In this article we are going to learn how to change the default style of a link so that it does not have the underline. We will also learn how to stylize these links to remove the underline and match with the site color. We will add an hover effect on the links so that the underline reappears. Remember above css does not support IE 6 and lower version of IE.
Output
WWW
Output
To give hover effect we have used <strong> element with title attribute in it. This attribute is used for displaying your text.
If you want to display any of the link of particular url & its title than you have to type your title's name & url in anchor element & to give hyperlink to your url you have to type <href> attribute in anchor element.
CSS
.Coding strong[title]:after{
content: "";
}
.Coding strong[title]:hover{
visibility: hidden;
}
.Coding strong[title]:hover:after{
content: attr(title) " ( "attr(style)" ) ";
visibility: visible;
}
XHTML
<div class="Coding">
<strong title="World Wide Web" style="color:red">WWW</strong>
</div>