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

ساورو Sawru · 8 يناير 2023

عمر قره محمد · 8 يناير 2023

قم بوضع كل من النص وليكن من النوع 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>

Adnane Kadri · 8 يناير 2023

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

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

مثال:

<div>
    <img src="" alt="img">
    <h2>Title</h2>
</div>

div h2{
  visibility: hidden;
}
div:hover h2{
  visibility: visible;
}

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

عبدالباسط ابراهيم · 8 يناير 2023

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

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

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

السؤال

ساورو Sawru

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية