สอง สาม วัน ที่ ผ่าน มา ฉัน ใช้ ผล แบบ โรล โอเวอร์ รูปภาพ ใน เว็บไซต์ ของ ฉัน ทำงาน. ที่สุด ของ เว็บไซต์ พอร์ต ใช้ ผล รูปภาพ แบบ โรล โอเวอร์. ใน i กวด วิชา นี้ จะ เรียน รู้ วิธี การ สร้าง ง่าย ผล รูปภาพ แบบ โรล โอเวอร์ CSS. ฉัน ใช้ เพียง ภาพ ง่ายๆ. ที่ เหลือ ออกแบบ CSS เป็น ขั้น พื้นฐาน ที่ มี รหัส HTML ง่ายๆ.

ทรัพย์สิน ชายแดน นี้ กลม ไม่ สนับสนุน IE. ดู การ สาธิต

แจ้ง ให้ เรา ทราบ ความ คิด ของ คุณ ถ้า คุณ พบ tutorials อื่น ๆ ที่ คุณ ต้องการ ใช้ ร่วม กับ เรา โปรด แจ้ง ให้ เรา ทราบ โดย วาง ใน ข้อคิดเห็น.

ตัวอย่าง เช่น

ขั้น ตอน ที่ 1 โครงสร้าง CSS

ครั้ง แรก ที่ เรา สร้าง Simple โค้ด CSS

  ; margin : 0 ; } * (ขยาย: 0; ขอบ: 0;)
 % normal Arial, Helvetica, sans-serif ; } ร่างกาย (font: 100% ปกติ Arial, Helvetica, sans-serif;) 


 width : 280px ; height : 150px ; background-image : url ( land .jpg ) ; background-position : top ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border : 10px solid #ccc ; font : 13px normal Arial, Helvetica, sans-serif ; line-height : 18px ; float :left ; margin : 0 10px 10px 0 ; } rollover_img. (กว้าง: 280px; ความ สูง: 150px; พื้น หลัง ภาพ: url (ที่ดิน. jpg) หลัง ตำแหน่ง: top;-moz-รัศมี-ขอบ: 10px;-webkit-ขอบ-รัศมี: 10px; ชายแดน: 10px แข็ง # ccc; font: 13px ปกติ Arial, Helvetica, sans-serif; บรรทัด ความ สูง: 18px; ฟ่อง: ซ้าย; ขอบ: 0 10px 10px 0;) 
 color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img (สี: # fff; กว้าง: 280px; ความ สูง: 150px; แสดง: ป้องกัน; ตกแต่ง ข้อความ: ไม่มี;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img a: โฉบ (พื้น หลัง: # 000; ความ ทึบ:. 60; กรอง: alpha (ความ ทึบ = 60);) 
  display : none ; width : 280px ; padding : 5px ; } . rollover_img span (แสดง: ไม่มี; กว้าง: 280px; ขยาย: 5px;) 
  span { display : block ; } . rollover_img span โฉบ: (แสดง: ป้องกัน;) 

ขั้น ตอน # 2 โครงสร้าง Html

ตอน นี้ เรา สร้าง รหัส Simple Html

  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > ชั้น <div = "rollover_img"> ชื่อ <a = "Ace href Infoway India" = "http://blog.aceinfowayindia.com">
 <span> dolor ipsum Lorem นั่ง amet, consectetur elit adipiscing.  Sed 
 condimentum.  ใน volutpat.  Elit Vestibulum.  ประวัติ enim Aenean eget 
 tellus bibendum pellentesque.  Sed ที่ est. ตัวอย่าง ข้อความ ipsum Lorem 
 dolor นั่ง amet, elit adipiscing consectetur. </ span>
 </ a> <div /> 

ดู การ สาธิต

ตาม เรา ที่ พูด เบา และ รวดเร็ว หรือ สมัคร พัฒนา Paradise + RSS ฟี ด สำหรับ tutorials พัฒนา เว็บ ที่ ดี ที่สุด ใน เว็บ.

ยื่น under: CSS, Tutorials โดย ผู้ ดูแล ระบบ