CSS - Tạo Hiệu Ứng Khi Trỏ Chuột

Giả sử ta muốn cho Pro một chút khi chuột rê vào một liên kết thì ta dung code CSS sau :

Demo:

<html>
<head>
<style type="text/css">
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>
<body>
<p><b><a href="index.html" target="_blank">Trang Chu </a></b></p>/* co the thay doi dia chi lien ket .. */
</body>
</html>

Hình minh họa khi chưa trỏ chuột vào:

Hình minh họa khi trỏ chuột vào :

Demo: mở rộng code trên

<html>
<head>
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>

Demo: mở rộng code trên .

<html>
<head>
<style type="text/css">
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="" target="_blank">This is a link</a>
</body>
</html>