نمایش عنصر به شکل کارت (card)، هنگام بردن موس بر روی عنصر، با کلاس w3-hover-shadow ، در W3.CSS
در کلید شماره 26169 ، چگونگی ساخت یک کارت (card) در چارچوب W3.CSS را شرح دادیم. اما اکنون قصد داریم تعیین کنیم که عنصر مورد نظر، تنها زمانی به شکل کارت (card) نمایش داده شود که کاربر، موس را بر روی آن ببرد.
برای این منظور، باید کلاس w3-hover-shadow در چارچوب W3.CSS را به کار ببریم. یعنی کلاس w3-hover-shadow را برای عنصر ذکر می کنیم :
به مثال زیر توجه کنید :
بخش مهم کدها :
کلاس w3-center برای نمایش متن در وسط عنصر می باشد.
کلاس w3-margin برای ایجاد حاشیه (margin) به اندازه 16px در همه جهت ها و کلاس w3-padding-32 برای ایجاد حاشیه (padding) به اندازه 32px در سمت بالا و پایین عنصر می باشد. این دو کلاس را برای مشاهده بهتر کارت (card) به کار برده ایم.
کلاس w3-purple نیز برای تغییر رنگ پس زمینه عنصر به رنگ بنفش (purple) می باشد.
با کد CSS زیر، مشخص کرده ایم که عرض (width) عنصر برابر 50 درصد از عرض کل صفحه باشد (50 درصد از عرض عنصر شامل آن) :
کد کامل صفحه HTML :
نتیجه :
اگر موس را بر روی عنصر ببرید، به شکل یک کارت (card) نمایش داده می شود.
