ساورو Sawru نشر 8 يناير 2023 أرسل تقرير مشاركة نشر 8 يناير 2023 كيف اجعل النص الموجود في الصورة يظهر فقط عندما يكون المؤشر على الصورة باستعمال html .css ملاحظة الصورة عادية وليست خلفية 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 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> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 8 يناير 2023 أرسل تقرير مشاركة نشر 8 يناير 2023 يمكنك تحقيق ذلك عن طريق: اخفاء النص واعطاءه التنسيق visibility: hidden تحديد النص عند تمرير مؤشر الفأرة على العنصر الأب واظهاره. مثال: <div> <img src="" alt="img"> <h2>Title</h2> </div> div h2{ visibility: hidden; } div:hover h2{ visibility: visible; } يمكنك اختبار ذلك على المتصفح لديك. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 8 يناير 2023 أرسل تقرير مشاركة نشر 8 يناير 2023 بالإضافة للتعليقات السابقة يمكنك استخدام ال tooltip عن طريق الخاصية title كما في المثال التالي <img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
ساورو Sawru
كيف اجعل النص الموجود في الصورة يظهر فقط عندما يكون المؤشر على الصورة باستعمال html .css ملاحظة الصورة عادية وليست خلفية
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.