كيف أضع صورة في فصل div على تمرير الماوس من شعبة فقط باستخدام CSS ؟

https://stackoverflow.com/questions/108461

01-07-2019
|

سؤال

لدي صغير معرض الصور المصغرة.عندما أضع مؤشر الماوس فوق صورة مصغرة أود أن يكون الحجم الكامل صورة يطفو على السطح في شعبة في الجانب الأيمن العلوي من الشاشة.لقد رأيت هذا يتم فقط باستخدام CSS و أود أن تسلك هذا الطريق بدلا من استخدام جافا سكريبت إذا كان ذلك ممكنا.

المحلول

CSS نقية Popups2, من نفس الموقع الذي يجلب لنا Complexspiral.لاحظ أن هذا المثال هو استخدام الفعلية الروابط الملاحية كما توالت على العنصر.إذا كنت لا تريد ذلك ، فإنه قد يسبب بعض الحساسية فيما يتعلق إصدارات IE.

الأسلوب الأساسي هو التمسك كل صورة داخل علامة رابط الصورة href (وإلا بعض إصدارات IE سوف تهمل :تحوم)

<a href="#">Text <img class="popup" src="pic.gif" /></a>

و الموقف بذكاء باستخدام الوظيفة المطلق.إخفاء الصورة في البداية

a img.popup { display: none }

ثم على الرابط التمديد إعداد تظهر.

a:hover img.popup { display: block }

هذا هو الأسلوب الأساسي ، ولكن هناك دائما ما يكون كبيرا المواقع القيود منذ علامة صورة يسكن داخل الرابط الوسم.راجع الرابط لمزيد من التفاصيل ؛ انه يستخدم شيء أكثر قليلا صعبة من العرض:أي إخفاء الصورة.

نصائح أخرى

CSS الملعب يستخدم CSS نقية لهذا النوع من الشيء ، أحد العروض هو بالتأكيد لمساعدتك ومساعدة كل CSS فقط عرض المصدر أن تعلم - ربما كنت ترغب في استخدام :تحوم الزائفة الطبقة ولكن هناك قيود على ذلك اعتمادا على المتصفح الخاص بك الاستهداف.

إريك ماير CSS نقية بالنوافذ 2 demo أصوات مماثلة بما فيه الكفاية إلى ما تريد.

هنا بعض الأمثلة:

هذا الأخير يعمل على انقر فوق.فقط أن تكون كاملة في السلوكيات.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow