كيف اجعل النص الموجود في الصورة يظهر فقط عندما يكون المؤشر على الصورة باستعمال 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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية