سلام دوستان :)
وقتتون بخیر و خسته نباشید
من یک styled-component دارم که لینک هست و با focus:
برای وقتی که کاربر روش کلیک میکنه یک سری استایل قرار دادم. حالا مشکل اینجاست که وقتی کاربر روی لینک کلیک میکنه استایلها اعمال میشوند ولی بعد از اینکه کاربر دستش رو از روی دکمه موس برداشت، فوکوس روی لینک از بین نمیره و اون استایلها روی لینک میمونن و دفعه بعد که کاربر بخواد کلیک کنه، اون انیمیشن مورد نظر اجرا نمیشه چون استایل ها از قبل اعمال شدن. ممنون میشم راهنمایی کنید.
کد component:
import styled from "styled-components";
import { NavLink } from "react-router-dom";
const StyledNavLink = styled(NavLink)`
width: fit-content;
padding: 1rem 1.5rem;
font-size: 2rem;
text-decoration: none;
color: black;
z-index: 1;
border-radius: 0.7rem;
transition: all 0.3s ease-out;
position: absolute;
overflow: hidden;
backface-visibility: hidden;
transform: translateY(0) scale(1);
box-shadow: 0 0.4rem 0.2rem transparent;
&::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 100%;
opacity: 0.75;
z-index: -1;
border-radius: 0.7rem;
backface-visibility: hidden;
background: linear-gradient(to top right, #2ecc71, #18dcff);
transition: all 0.3s ease-out;
}
&:hover {
&::before {
top: 0;
}
transform: translateY(-1rem) scale(1.15);
box-shadow: 0 0.4rem 0.2rem grey;
&:focus {
transform: translateY(-0.4rem) scale(1.1);
box-shadow: 0 0.3rem 0.15rem grey;
&::before {
opacity: 0.9;
}
}
}
`;
export default StyledNavLink;
کدهای مربوط به فوکوس رو خارج از بخش hover:&
هم گذاشتم و باز هم درست کار نمیکرد.
اگه میخواین فقط وقتی کاربر در حال کلیک کردن روی عنصر هست این استایل ها اعمال بشن از :active استفاده کنین.
درضمن من چک کردم اگه بعد از کلیک کردن روی عنصر یه کلیک یه جای دیگه صفحه بزنید (که قطعا کاربر میزنه) عنصر به حالت اولش برمیگرده.
اگه میخواین فقط وقتی کاربر در حال کلیک کردن روی عنصر هست این استایل ها اعمال بشن از :active استفاده کنین.
درضمن من چک کردم اگه بعد از کلیک کردن روی عنصر یه کلیک یه جای دیگه صفحه بزنید (که قطعا کاربر میزنه) عنصر به حالت اولش برمیگرده.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟