Page 1 of 1

CSS เพิ่มลูกเล่นให้กับ Link

Posted: 27/01/2015 10:43 am
by GoB
CSS เพิ่มลูกเล่นให้กับ Link

วิธีนี้เป็นการปรับแต่งรูปแบบของลิงค์ คือ เมาส์นำเมาไปชี้ตำแหน่งของลิงค์ ลิงค์ก็จะเปลี่ยนเป็นสีอื่น ทำให้ลิงค์มีความน่าสนใจเพิ่มมากขึ้น

Code: Select all

<html>
<head>
<style>
a:visited {		//กำหนดสีให้กับลิงค์
    color: #0000FF;     
}
a:hover {		 //กำหนดสีเมื่อนำเมาส์ไปชี้ทำตำแหน่งของลิงค์
    color: #FF0000;    
}
a:active {		//กำหนดสี เมื่อนำเมาส์มาคลิก
    color: #C0C0C0;    
}
</style>
</head>
<body>
<p><b><a href="https://www.mindphp.com/" target="_blank">On Click</a></b></p>	//กำหนดข้อความ พร้อมกับลิงค์ 
</body>
</html>
*เพิ่มเติม
target="blank" คือ คลิกขึ้นแท็บใหม่

ผลลัพธ์ที่ได้
-----------------------------------------------------------------------------------

เริ่มแรก
1.jpg
1.jpg (4.86 KiB) Viewed 484 times
หลังจากนำเมาส์ไปชี้ที่ตำแหน่งลิงค์
2.jpg
2.jpg (4.96 KiB) Viewed 484 times
เมื่อนำเมาส์คลิกลิงค์
3.jpg
3.jpg (3.66 KiB) Viewed 484 times