اضافة تلميحات على روابطك CSS فقط

خاصية التلميحات من الخواص المميزه لتوضيح كثير من الاشياء سواء للروابط سواء كانت على كتابة أو صور فهي تفيد بتنبيه القارئ عند مروره على رابط او صوره لكي يفهم ما معناه او ما سيحدث عند الضغط عليه خصوصاً للمواقع المعلوماتية والإخباريه أو مواقع التي تستخدم صور وروابط بشكل كبير فهذه الخاصية تكون مفيده جداً هناك عدة طرق لإستخدام وعمل تلك الخاصية أشهرها وأكثرها امكانيات هي عبر تقنية JQuery لكنها قد تسبب بعض الثقل وقد تكون بها بعض الصعوبه في الإستخدام أما عن طريق CSS لإهي ستكون خفيفة جداً وسهلة في الإستخدام ويمكنك معاينة الفكرة بتمرير الماوس هنا وهذا مثال آخر على رابط لكن على صورة ومع عدد كلمات أكثر

شرح التركيب

أضف الكود التالي فوق الوسم ]]></b:skin>

 .cnmutip{display: inline;position: relative;}
.cnmutip:hover:after {
  background:rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  bottom: 36px;
  color: #fff;
  content: attr(title);
  display: inline-block;
  font-size: 10px;
  left: 20%;
  padding: 3px 8px 4px;
  position: absolute;
  text-align: center;
  width: 200px;
  z-index: 98;
}

 استبدل هذا الكود rgba(0, 0, 0, 0.6 بلون يناسبك كخلفية للتلميحات او اتركه كما هو ان اردت اللون شفاف قليلا
الرقم 200 هو عرض التلميحات يمكنك زيادته او انقاصه
الرقم 10 هو حجم الخط
أما هذا #fff هو لون الخط

طريقة الإستخدام

أضف الكود التالي في اى مكان تريد وأنت تكتب الموضوع مع تغيير صندوق الكتابة من وضع تأليف الى وضع HTML

 <a class="cnmutip" href="#" title="*****" target="_blank">000</a>

استبدل # بالرابط

واستبدل ***** بما تريد كتابته في التلميحات

واستبدل 000 بكلمة او صورة التي سيمرر القارئ عليها مؤشر الفأرة

ويمكنك تكرار الكود كما تريد وبالتوفيق

المحتويات والمعلومات في هذا الموضوع قديمة أول لمشكلة تم حلها

العودة للرئيسية متابعة القراءة