اضافة تلميحات على روابطك 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 بكلمة او صورة التي سيمرر القارئ عليها مؤشر الفأرة

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

المصدر