เพื่อนที่ท่องอินเทอร์เน็ตบ่อยครั้งจะสังเกตเห็นว่าเมาส์ในบางเว็บไซต์ไม่ได้มีรูปร่างเป็นลูกศรขึ้นในแนวทแยงปกติ แต่เป็นรูปทรงกากบาทหรือลูกศรซ้ายหรือเครื่องหมายคำถาม ฯลฯ เมื่อคุณต้องการให้เมาส์แสดงรูปร่างที่แตกต่างกันในตำแหน่งที่แตกต่างกันบนหน้าเว็บเพื่อสะท้อนถึงพื้นที่การทำงานที่แตกต่างกัน เมื่อคุณต้องการให้เว็บไซต์ของคุณสะท้อนถึงสไตล์ที่เป็นเอกลักษณ์ ให้ลองใช้สไตล์ของเมาส์ ที่จริงแล้ว สไตล์เมาส์มีการใช้งานที่หลากหลาย ดังนั้น คุณจะใช้สไตล์เมาส์ที่แตกต่างกันได้อย่างไร เริ่ม Dreamweaver เปิดหน้าเว็บที่คุณต้องการใช้สไตล์เมาส์ เลือกเมนูแบบเลื่อนลงข้อความในหน้าต่างหลัก และ จากนั้นเลือก New ในเมนูย่อย CSS Style คำสั่ง Style จะสร้างสไตล์ชีตใหม่ (หมายเหตุ: หากมีสไตล์ชีตอยู่แล้วในหน้าเว็บของคุณ คุณสามารถเลือก CSS Styles Edit Style Sheet เพื่อแก้ไขสไตล์ชีตได้) กล่องโต้ตอบสไตล์ใหม่จะปรากฏขึ้น รายการ Type มีปุ่มตัวเลือกสามปุ่ม: สร้างสไตล์แบบกำหนดเอง, กำหนดแท็ก HTML ใหม่ และ ใช้ตัวเลือก CSS ในบรรดานั้น Make Custom Style คือสไตล์ที่กำหนดเอง และชื่อสไตล์จะขึ้นต้นด้วยจุด ใช้ตัวเลือก CSS คือการใช้ตัวเลือก CSS ซึ่งมีไฮเปอร์ลิงก์สี่รูปแบบ
a:active/a:hover/a:link/a:visited ; Redefine HTML Tag คือสไตล์ที่กำหนดแท็กระบบ HTML เช่น abodybr และอื่นๆ สมมติว่าเราตั้งค่าสไตล์เมาส์สำหรับไฮเปอร์ลิงก์ในหน้านี้เท่านั้น ให้เลือกแท็กในตัวเลือกกำหนดแท็ก HTML ใหม่ เลือกเอกสารนี้เท่านั้นสำหรับรายการกำหนดด้านล่าง คลิกปุ่มตกลง กล่องโต้ตอบคำจำกัดความสไตล์สำหรับกล่องโต้ตอบจะปรากฏขึ้นและเข้าสู่การตั้งค่าสไตล์ไฮเปอร์ลิงก์ หมวดหมู่ทางด้านซ้ายคือหมวดหมู่สไตล์ ไม่มีคำอธิบายสำหรับรายการอื่นๆ ที่นี่ เราเลือกรายการส่วนขยาย คุณสามารถดูรายการเคอร์เซอร์ได้ใน Visual Effect ทางด้านขวา ซึ่งเป็นรายการหลักในการตั้งค่าสไตล์เมาส์ คลิกเมนูแบบเลื่อนลงทางด้านขวา เลือกสไตล์เมาส์ที่คุณต้องการ แล้วคลิกปุ่มตกลง เรามาพูดถึงความหมายทั่วไปของแต่ละสไตล์กันดีกว่า
มือ : เป็นรูปทรงมือที่คุ้นเคย
crosshair: เป็นรูปกากบาทซึ่งเป็นสไตล์ที่ใช้ในหน้าแรกของ Little Turtle
ข้อความ: เป็นสไตล์เมื่อเลื่อนเมาส์ไปที่ข้อความ
รอ: คือผลของการรอ
ค่าเริ่มต้น: มันเป็นเอฟเฟกต์เริ่มต้น
ช่วยด้วย: เป็นรูปแบบเมาส์ที่มีเครื่องหมายคำถาม
e-resize: คือลูกศรขวา
ne-resize: คือลูกศรที่ชี้ขึ้นไปทางขวา
n-resize: เป็นลูกศรขึ้น
nw-resize: คือลูกศรชี้ขึ้นไปทางซ้าย
w-resize: เป็นลูกศรที่ผ่านไปทางซ้าย
sw-resize: คือลูกศรชี้ลงไปทางซ้าย
s-resize: เป็นลูกศรชี้ลง
se-resize: คือลูกศรชี้ลงไปทางขวา
auto: มันเป็นเอฟเฟกต์อัตโนมัติของระบบ
แน่นอน คุณยังสามารถใช้สไตล์นี้กับแท็กอื่นๆ ได้ตามต้องการ หรือนำไปใช้กับข้อความบางย่อหน้าก็ได้ หากผู้อ่านคุ้นเคยกับโค้ด CSS การเขียนโค้ดด้วยมือโดยตรงอาจจะสะดวกกว่า โดยเฉพาะอย่างยิ่ง หากคุณต้องการใช้สไตล์เมาส์ที่แตกต่างกันสำหรับสถานที่ที่แตกต่างกัน หรือใช้สไตล์เมาส์ที่แตกต่างกันสำหรับแท็บต่างๆ เพียงเขียนสไตล์ลงในแท็กเฉพาะโดยตรง
วิธีการคือ: <tag style=cursor:mouse_style> โดยที่ tag คือชื่อแท็ก mouse_style คือรูปแบบของเมาส์ เช่น มือ/เป้าเล็ง/ข้อความ/รอ ฯลฯ
เราจะยกตัวอย่างที่เฉพาะเจาะจงเพื่อให้ทุกคนเข้าใจการตั้งค่าสไตล์เมาส์ให้ลึกซึ้งยิ่งขึ้น
<span style=cursor:hand> hand: เป็นรูปทรงมือที่คุ้นเคย </span>
< span style=cursor:crosshair>crosshair: มันคือ crosshair ซึ่งเป็นสไตล์ที่ใช้ในหน้าแรกของ Little Turtle </span>
< span style=cursor:text>text: เป็นรูปแบบที่มักจะเลื่อนเมาส์ไปที่ข้อความ </span>
< span style=cursor:wait>wait: คือผลของการรอคอย </span>
< span style=cursor:default>default: เป็นเอฟเฟกต์เริ่มต้น </span>
< span style=cursor:help>help: เป็นรูปแบบเมาส์ที่มีเครื่องหมายคำถาม </span>
< span style=cursor:e-resize>e-resize: เป็นลูกศรไปทางขวา </span>
< span style=cursor:ne-resize>ne-resize: เป็นลูกศรชี้ขึ้นไปทางขวา </span>
< span style=cursor:n-resize>n-resize: เป็นลูกศรชี้ขึ้น </span>
< span style=cursor:nw-resize>nw-resize: เป็นลูกศรชี้ขึ้นไปทางซ้าย </span>
< span style=cursor:w-resize>w-resize: มันเป็นลูกศรที่ผ่านไปทางซ้าย </span>
< span style=cursor:sw-resize>sw-resize: เป็นลูกศรชี้ลงไปทางซ้าย </span>
< span style=cursor:s-resize>s-resize: เป็นลูกศรชี้ลง </span>
< span style=cursor:se-resize>se-resize: เป็นลูกศรชี้ลงไปทางขวา </span>
< span style=cursor:auto>auto: เป็นเอฟเฟกต์อัตโนมัติของระบบ </span>
คัดลอกโค้ดด้านบนไปยังหน้าเว็บของคุณแล้วกด F12 เพื่อดูตัวอย่าง เลื่อนเมาส์ไปเหนือข้อความที่เกี่ยวข้องและดูว่าเกิดอะไรขึ้นกับเมาส์ มันปรากฏในรูปแบบที่สอดคล้องกันหรือไม่?