Совет по CSS! 🤙
Вы можете создать этот магнитный эффект :hover
с помощью позиционирования анкоров CSS, :has
и без JS 🔥. article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}
Как сохранить чистоту при входе/выходе из списка? Используйте transition-delay ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}
>>Click here to continue<<