شرح استعمال خاصية :hover

من طرف YasirAyad الأربعاء 1 أبريل - 4:52

شرح استعمال خاصية :hover

السلام عليكم ورحمة الله وبركاته

اقدم لكم اليوم درس ع السريع

ساشرح لكم كيفيه استخدام خاصية hover

طبعا الـ hover تعتبر حركة انتقالية للعنصر عند مرور الماوس عليه

راح اطبق الدرس على div

الآن نضيف داخل الـ body

الكود:: <body><div id="ahlamontada">new.moon</div></body>

ونبدأ نعطيه خصائص الـ css

وراح تكون الخصائص كالآتي

سنقوم بشرح كل واحدة من تلك الخصائص

الكود:: #ahlamontada{ width:250px; height:120px; margin:auto; background:#666; -moz-border-radius:0 30px 0 30px; -webkit-border-radius:0 30px 0 30px; border-radius:0 30px 0 30px; box-shadow:0 0 10px #ccc; text-align:center; color:#fff; transition:; -moz-transition:background linear .3s; -webkit-transition:background linear .3s; transition:background linear .3s; font:bold 30px/120px "Courier New", Courier,monospace;}

1- width: وهو عرض للـ div
2- height: ارتفاع
3- margin وهي الحد الخارجي، وعندما نضعها auto تعمل توسيط في حالة لها عرض وارتفاع فقط.
4- background: وهي عبارة عن خلفية، وكلمة background لوحدها تحميل جميع خواص الخلفية، من صورة ولون، ونقاط x,y للصورة، والتمدد (لها درس خاص).
5- -moz-border-radius: هي الحواف الدائرية للـ div، وهذه تعمل على موزيلا، والبيئة الخاصة بها.
6- -webkit-border-radius: ايضا الحواف الدائرية، وتعمل على كروم والبيئة الخاصة بها.
7- border-radius: الحواف الدائرية، للمتصفحات التي لا تنتمي لأي منصة، او بيئة.
8- box-shadow: وهو ظل.
9- text-align: موضع النص، يمين، يسار، وسط.
10- color: وهو لون الخط فقط، أي عند وجود تاج الـ <a> داخل الـ ديف، لا يأخذ هذا اللون.
11- transition: وهي خاصية جديدة في css3، وهي عبارة عن حركات، والمستخدمة في التطبيقة للخلفية، ولا أريد أن أتعمق فيها الآن، سأجعل لها درس خاص وكبير.
12- font: كلمة font لوحدها تأخد أربع خاصيات (عريض أو عادي، حجم الخط، line-height، توع الخط)

راح يصبح شكل الديف كالاتي

شرح استعمال خاصية :hover 2015-016

الآن نريد أن نعمل تأثيرين فقط عند مرور الماوس على الـ ديف

1- تغيير الخلفية، وبما اننا وضعنا transition سيكون تغيير الخلفية بشكل تأثير وبحركة جميلة.
2- تغيير لون الظل.

الكود:: #ahlamontada:hover{ background:#09C; box-shadow:0 0 10px #06C;}

لاحظ لقد اضفنا الى كود css خاصيه :hover
#ahlamontada{
بعد اضافه تأثير hover اصبح كالاتي
#ahlamontada:hover{

وهكذا عند المرور عليها بالماوس راح تلاحظ التغيرات التي حصلت مما وضعناه من مؤثرات ,

في حال لديك استفسار لا تتردد في فتح موضوعك في قسم دعم مشاكل التومبلايت و الأكواد

تحياتي لكم

فريق المساعدة

new.moon

تم تنسيق الشرح يوم 27/7/2015بواسطه المتطوع المساعد زيزو اليكس

شرح استعمال خاصية :hover 5510