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 » 27/01/2015 10:43 am

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests