مدوّنة المعتصم

‬

‫

‬
‎‫كنت أبحث قبل مدّة عن طريقة لجعل النص يتغيّر بمجرّد وضع المؤشر فوقه بواسطة الـ CSS والـ jQuery ، ووجدت ‬طريقة تساعدني على فعل هذا بشكل أفضل مما أردت ،‫ وأحببت مشاركتها هنا.‬
‎‫الطريقة تعتمد على مكتبة الـ jQuery بالإضافة إلى ‬الأداة الأساسية‫ التي ‬ت‫قوم بالعملية rotate3Di وأيضاً لا أنسى الـ CSS.‬
‎‫النتيجة ستكون شيئاً مشابهاً لما يلي: (ضع المؤشر فوق أحد المربعات لترى النتيجة)‬
‫

‬

‫

‬
‎‫كود الـ HTML المستخدم لعمل هذا بسيط جداً ، وهو عبارة عن div أساسي وفي داخله قائمة ، كل عنصر li في هذه القائمة يحتوي على 2 divs ، الأول سيكون اسم الكلاس الخاص فيه front والثاني back. الفرونت سيتم عرضه مباشرة عند تحميل الصفحة ، والباك سيتم إخفاؤه عن طريق الستايل ، وعندما يمر المؤشر عليه سيتم إخفاء الفرونت وإظهار الباك عن طريق سكربت rotate3Di.‬
‫

‬
‫

‬
‎‫هذا هو كود الـ HTML المستعمل لإظهار هذه المربعات:‬
‫

‬
‏

<div id="content-index-top"> ‬

   ‪<ul class="cards">‬

      ‪<li>‬
         ‪<div class="front">ب</div>‬
         ‪<div class="back">ت</div>‬
      ‪</li>‬

      ‪<li>‬
         ‪<div class="front">ث</div>‬
         ‪<div class="back">ج</div>‬
      ‪</li>‬

      ‪<li>‬
         ‪<div class="front">ح</div>‬
         ‪<div class="back">خ</div>‬
      ‪</li>‬

      ‪<li>‬
         ‪<div class="front">د</div>‬
         ‪<div class="back">ذ</div>‬
      ‪</li>‬

      ‪<li>‬
         ‪<div class="front">ر</div>‬
         ‪<div class="back">ز</div>‬
      ‪</li>‬

   ‪</ul>‬

‪</div>

‬
وهذا هو كود الستايل:

‬

‪‬
‪

‬.cards li {‬
‪	list-style-type:none;‬
‪	margin: 0 0 5px 34px;‬
‪	line-height:115%;‬
‪	float:right;‬
‪	list-style-type:none;‬
‪	color:#888‬
‪}‬

‪.cards .front, .cards .back {
	width:80px; height:80px;
	border:solid 1pt gray; border-radius:8px;
	-moz-border-radius:8px; -webkit-border-radius: 8px;
	padding:4px;
	text-align: center;
	font-size:33pt;
	line-height:70px;
}

‪.cards .front {‬
‪	background-color:#000;‬
‪}‬

‪.cards .back {‬
‪	display:none;‬
‪	background-color:#fff;‬
‪}‬

‬
‪

‫

‬
‎‫بإمكانك التعديل في عدد القوائم و الستايل كما تريد. مثلاً تستطيع تغييره لتحصل على:‬
‫

‬

‬

‎‫أهم شيء هو أن يكون الـ id للـ div المحيط بالقائمة هو content-index-top وأن يكون اسم الكلاس للقائمة هو cards. وكل عنصر من عناصر القائمة يجب أن يحتوي على 2 divs ، ويكون اسم كلاس الـ div الأول front والثاني back. وأيضاً يجب أن تستورد مكتبة الـ jQuery قبل الكود ، وتستورد مكتبة rotate3Di بعد كود الـ HTML. بإمكانك التعديل في هذه الأسماء ولكن يجب أن تقوم بتعديلها أيضاً في ملف أداة rotate3Di.‬
‫

‬

‫

‬
‎‫تحميل المثال

‫

‬

‫