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

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

شرح التركيب

أضف الكود التالي فوق الوسم ]]>

 .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

 #" title="*****" target="_blank">000

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

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

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

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

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.