اذهب إلى المحتوى
  • 0

كيف اجعل النص الموجود في الصورة يظهر فقط عندما يكون المؤشر على الصورة باستعمال html .css ملاحظة الصورة عادية وليست خلفية

ساورو Sawru

السؤال

Recommended Posts

  • 0

قم بوضع كل من النص وليكن من النوع p و الصورة img داخل عنصر ما وليكن div.

فيمكنك عمل المطلوب كالتالي  :

<body>
  <div>
    <img src="https://scontent-lhr8-1.xx.fbcdn.net/v/t31.18172-8/12194861_10153080948236813_6757042151481603403_o.jpg?_nc_cat=110&ccb=1-7&_nc_sid=9267fe&_nc_ohc=wBCQasVOygEAX81FHgh&_nc_ht=scontent-lhr8-1.xx&oh=00_AfCUZGNbXH2G8R8_DIAmMR-2EHIqv4BGg4XUMh7s0wgcDw&oe=63E210B8" alt="دلفين" />
    <p>ساعد الدلافين فهي حيوانات جميلة</p>
  </div>
  <style>
    p {
      opacity: 0;
      transition: 0.2s;
    }
    div:hover p {
      opacity: 1;
    }
  </style>
</body>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك تحقيق ذلك عن طريق:

  1. اخفاء النص واعطاءه التنسيق visibility: hidden
  2. تحديد النص عند تمرير مؤشر الفأرة على العنصر الأب واظهاره. 

مثال:

<div>
    <img src="" alt="img">
    <h2>Title</h2>
</div>
div h2{
  visibility: hidden;
}
div:hover h2{
  visibility: visible;
}

يمكنك اختبار ذلك على المتصفح لديك.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

بالإضافة للتعليقات السابقة يمكنك استخدام ال tooltip عن طريق الخاصية title كما في المثال التالي

<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...