انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: التلميحات في لغة CSS

CSS tooltip animation عمل مؤثر حركي مع tooltip في لغة CSS

سوف تتعلم في هذا الدرس علي كيفية إنشاء tooltip تلميح في لغة CSS لعنصر معين وهو نص مخفي يوضح معلومات إضافية حول العنصر ويظهر فقط عند تمرير مؤشر mouse علي العنصر.

1 صفوف تعليمية
لغة CSS
3,583 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمكن أن يظهر صندوق tooltip بمؤثر حركي في لغة CSS عن طريق خاصية transition  وتحويل opacity من قيمة صفر لقيمة 1 ويجب استخدام خاصية visibility.

CSS tooltip animation

جرّب بنفسك

CSS tooltip animation

ظهور صندوق tooltip مع مؤثر حركي في لغة CSS.

HTML 
.text
{
  position:absolute;
  left:102%;
  top:0px;
  visibility: hidden;
  border:transparent solid 1px;
  padding:5px;
  color:white;
  background:black;
  border-radius:5px;
  opacity: 0;
  transition: opacity 3s;
}
جرّب بنفسك

جميع فقرات هذا الدرس (التلميحات في لغة CSS)