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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

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

Post 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 471 times
หลังจากนำเมาส์ไปชี้ที่ตำแหน่งลิงค์
2.jpg
2.jpg (4.96 KiB) Viewed 471 times
เมื่อนำเมาส์คลิกลิงค์
3.jpg
3.jpg (3.66 KiB) Viewed 471 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests