چگونه از کلاس کاذب hover در سی اس اس استفاده کنم؟
گام اول : کدنویسی اچ تی ام ال (html) ؛ ساختار بلاک مورد نظرمون رو ایجاد میکنیم. شامل عکس و عنوان عکس که می خواهیم افکت هاور را رویشان اعمال کنیم.
<div class="block"> <img title="" alt="" src="/park.jpg"> <div class="block-caption"> عنوان عکس مورد نظر </div> </div>
گام دوم : کدنویسی سی اس اس (css) ؛
.block{
گام سوم : افزودن کلاس کاذب هاور یا افکت آمدن ماوس روی المنت های مورد نظرمون.توی این قسمت میخواهیم افکت آمدن ماوس رو بلاک اصلی یا همون نحوه ی استفاده از کلاس کاذب hover در سی اس اس رو بگم.
display:block;
transition:0.3s ease-in all;
}
.block:hover{
وقتی ماوس رو بلاک مورد نظرمون اومد ؛ بلاک مورد نظرمون یه کم شفاف میشه.
opacity:0.8;
}
اشتراک
Please login to comment
0 نظرات