hover + after
سوال جدیدپروژه بالا رو میخواستم مشابهه زیر در بیارم
ولی چرا hover ش کار نمیکنه و یه چیز دیگه هرکاری کردم نتونستم اون حالت حاشیه ش رو دربیارم
برای hover فکر می کنم باید کدتون رو به این شکل بنویسید(البته مقادیر تعیین شده bottom,top,left, right در کد زیر برای ایجاد حاشیه می باشد)
.wrap-grid__items:hover:after {
opacity: 1;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
و برای اینکه حاشیه را هم داشته باشین یک راهش این هست که باید width و height رو برای سلکتور wrap-grid__items:after حذف کنید یا مقدارش رو برابر با autoقرار بدین، بعد برای bottom,top,left, right در حالت hover مقادیر مورد نظر را قرار دهید (برای مثال مقادیر تعیین شده در کد بالا).
یا اینکه می تونید مقادیر bottom,top,left, right را به جای حالت hover برای سلکتور wrap-grid__items:after تعیین کنید یعنی به جای مقدار صفر مقدار مورد نظر را ( مثلا ۱۰px) قرار دهید
یک نکته اینکه transition را برای opacity قرار بدید نه background-color،چرا که اینجا opacity هست که تغییر می کند .
چرا با edge مشکل داره؟ prefix هاش رو هم زدم ولی فرقی نکرد!