اضافة تلميحات على روابطك CSS فقط
خاصية التلميحات من الخواص المميزه لتوضيح كثير من الاشياء سواء للروابط سواء كانت على كتابة أو صور فهي تفيد بتنبيه القارئ عند مروره على رابط او صوره لكي يفهم ما معناه او ما سيحدث عند الضغط عليه خصوصاً للمواقع المعلوماتية والإخباريه أو مواقع التي تستخدم صور وروابط بشكل كبير فهذه الخاصية تكون مفيده جداً هناك عدة طرق لإستخدام وعمل تلك الخاصية أشهرها وأكثرها امكانيات هي عبر تقنية JQuery لكنها قد تسبب بعض الثقل وقد تكون بها بعض الصعوبه في الإستخدام أما عن طريق CSS لإهي ستكون خفيفة جداً وسهلة في الإستخدام ويمكنك معاينة الفكرة بتمرير الماوس هنا وهذا مثال آخر على رابط لكن على صورة ومع عدد كلمات أكثر
شرح التركيب
أضف الكود التالي فوق الوسم ]]>
.cnmutip{display: inline;position: relative;}استبدل هذا الكود rgba(0, 0, 0, 0.6 بلون يناسبك كخلفية للتلميحات او اتركه كما هو ان اردت اللون شفاف قليلا
.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;
}
الرقم 200 هو عرض التلميحات يمكنك زيادته او انقاصه
الرقم 10 هو حجم الخط
أما هذا #fff هو لون الخط
طريقة الإستخدام
أضف الكود التالي في اى مكان تريد وأنت تكتب الموضوع مع تغيير صندوق الكتابة من وضع تأليف الى وضع HTML
#" title="*****" target="_blank">000
استبدل # بالرابط
واستبدل ***** بما تريد كتابته في التلميحات
واستبدل 000 بكلمة او صورة التي سيمرر القارئ عليها مؤشر الفأرة
ويمكنك تكرار الكود كما تريد وبالتوفيق
