css | scss iç içe transition kullanım sorunu
merhaba arkadaşlar,
<a href="#" class="btn btn-outline-warning px-2">Profili görüntüle <i class="fa-solid fa-angles-right ms-1"></i></a>
a {
align-self: flex-end;
padding: 3px 8px;
font-family: 'Mulish', sans-serif;
font-size: 15px;
box-shadow: $shadow-sm;
transition: .5s all;
i {
transition: .4s all;
}
&:hover {
color: $white;
i {
transform: rotateX(180deg) rotateY(180deg);
}
}
}
şu şekilde bir yapım var. "<b>a</b>" etiketi hover olunca a etiketinin rengini değiştiriyorum. geçişli olması için transition kullandım. a hover olunca da içerisinde ki "<b>i</b>" etiketinede transform işlemi uyguluyorum. i etiketinin kendisine de transition verince bir gecikme oluyor a etiketinde de transition olduğu için bunu benmi yanlış kullanıyorum yoksa bir çözümü var mı?
css'i hiç sevmedim, javascript varken artık css de dinamikleştirmek adına arayüzde hiç style bile yazmıyorum. bu da pratik yapmadığım için bildiklerimi unutmama sebep oluyor. ancak sadece dikkatsizlik yaptığım için, mesaj kasmaya çalışan bir ergenmişim gibi tavır takınman hoş olmadı. css konularına bir daha bakmayacağım, senin sorduğun sorularada.
a{
align-self: flex-end;
padding: 3px 8px;
font-family: 'Mulish', sans-serif;
font-size: 15px;
box-shadow: $shadow-sm;
transition: .5s all;
}
a i {
transition: all .4s;
}
a:hover > i{
display: inline-block;
color: $white;
transform: rotateX(180deg) rotateY(180deg);
}
a {
align-self: flex-end;
padding: 3px 8px;
font-family: 'Mulish', sans-serif;
font-size: 15px;
box-shadow: $shadow-sm;
transition: .5s all;
i {
transition: all .4s;
}
&:hover {
>i {
display: inline-block;
color: $white;
transform: rotateX(180deg) rotateY(180deg);
}
}
}