เอฟเฟกต์โฮเวอร์คืออะไร?

2024 ผู้เขียน: Lynn Donovan | [email protected]. แก้ไขล่าสุด: 2023-12-15 23:54

เลื่อนเอฟเฟกต์ : ป๊อปและพื้นหลังเคลื่อนไหว เลื่อนเอฟเฟกต์ สำหรับผลิตภัณฑ์ รูปภาพปรากฏขึ้นและเลื่อนลง จากนั้นพื้นหลังจะเลื่อนออกและเคลื่อนไหว

รู้ยัง ทำอย่างไรให้ข้อความปรากฏขึ้นเมื่อภาพลอยอยู่?

วิธีแสดงข้อความเคลื่อนไหวเหนือรูปภาพบน Hover โดยใช้ CSS3 เท่านั้น

1. สร้าง HTML¶ เพิ่มรูปภาพของคุณโดยใช้

   แท็กและข้อความ ประการแรก คุณควรเพิ่มรูปภาพของคุณโดยใช้ปุ่ม

   แท็ก

2. สร้าง CSS¶ Set:hover selector เอฟเฟกต์ของโฮเวอร์ถูกตั้งค่าโดยใช้:hover pseudo-class ที่เลือกและจัดสไตล์องค์ประกอบ

อาจมีคนถามว่าคุณใช้โฮเวอร์อย่างไร? ตัวเลือก:hover ใช้เพื่อเลือกองค์ประกอบเมื่อคุณวางเมาส์เหนือองค์ประกอบเหล่านั้น

1. เคล็ดลับ: ตัวเลือก:hover สามารถใช้ได้กับทุกองค์ประกอบ ไม่เพียงแต่กับลิงก์เท่านั้น
2. เคล็ดลับ: ใช้ตัวเลือก:link เพื่อกำหนดสไตล์ลิงก์ไปยังหน้าที่ไม่ได้เยี่ยมชม:visited selector เพื่อจัดรูปแบบลิงก์ไปยังหน้าที่เยี่ยมชม และ:active ตัวเลือกเพื่อจัดรูปแบบลิงก์ที่ใช้งานอยู่

ในที่นี้คุณจะวางรูปภาพใน CSS ได้อย่างไร

คำตอบ: ใช้คุณสมบัติ CSS background-image

1. เปลี่ยนรูปภาพเมื่อวางเมาส์เหนือใน CSS
2. .การ์ด {
3. ความกว้าง: 130px;
4. ความสูง: 195px;
5. พื้นหลัง: url("images/card-back.jpg") ไม่ซ้ำ;
6. แสดง: บล็อกอินไลน์;
7. }

ฉันจะกำจัดโฮเวอร์ได้อย่างไร

ในการปิดใช้งานเอฟเฟกต์โฮเวอร์ ฉันมีคำแนะนำสองข้อ:

1. หากเอฟเฟกต์โฮเวอร์ของคุณถูกเรียกใช้โดย JavaScript เพียงใช้ $ unbind('โฮเวอร์');
2. หากสไตล์โฮเวอร์ของคุณถูกทริกเกอร์โดยคลาส ก็ใช้ $ removeClass('hoverCssClass');