การใช้ css เพิ่ม ให้แก่ tag html ซึ่งการใช้ box-show เพื่อ กำหนดเงา ให้แก่ tag html เพื่อให้ tag นั้นมีมิติ แล้วเพิ่ม hover selector ซึ่งการทำงานของ hover คือ เมื่อนำเมาส์ไปวางไว้บน tag html ที่เราใส่คำสั่ง css ไปก็แล้วแต่ องค์ประกอบ css ตัวอย่างที่กำหนดให้ มีดังนี้
border: 1px solid; กำหนดความหนาของเส้นกรอบ
padding: 10px; กำหนดช่องว่างให้พื้นที่ ถ้ากำหนด ดังตัวอย่าง จะเท่ากับ (10px,10px,10px,10px)
box-shadow: 5px 10px 8px #888888; กำหนดเงา ตำแหน่งที่เงาแสดงผล และสีของเงา
:hover จะทำงานเมื่อ นำเมาส์ไปวางบน tag html
ตัวอย่าง
คำสั่ง css
โค้ด: เลือกทั้งหมด
#test1 {
border: 1px solid;
padding: 10px;
}
#test1:hover {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px 8px #888888;
}
โค้ด: เลือกทั้งหมด
<div id="test1">
<p>Set box-shadow on hover </p>
</div>เมื่อนำเมาส์ไปวางบน tag p