cursor:pointer

Doctanna napisał(a):

Mam małą zagwozdkę
Poniżej linijka kodu z React

Kopiuj

const SubmitButton = ()=>{return(<div className = ' mx-2 text-success IcoMoon' onClick ={this.handleSubmitButton} ></div>)}

A tu definicja klasy IcoMooon

Kopiuj

.IcoMoon{
    font-family: IcoMoon;
    cursor:pointer !important;  
}

Problem dotyczy wyglądu kursora po najechaniu na element. Otóż &#xe901 to tzw ptaszek albo check; rzecz wtym, że przy najeździe kursor jest strzałką na jego brzegu elementu a jest 'auto' czyli jakby duże I wygląd w jego środku (czyli na ptaszku). Chciałam aby był pointerem** zwłaszcza** na ptaszku. Co tu jest nie tak? Sprawdzałam także jako span oraz i - jest tak samo( znaczy niedobrze).

Do zamknięcia - działa po przepisaniu na StyledComponents co i tak było w planie

const SubmitButton = ()=>{return(<Icon onClick ={this.handleSubmitButton} >&#xe901;</Icon>)}

const Icon =styled.span`
margin: 0.5rem;
font-family: IcoMoon;
cursor:pointer;
color: green;
`

Witam mam pewien problem z cursor pointerem.
Zmieniłem wygląd kursora za pomocą cursor:url(img/cursor.png); niestety po najechaniu na obiekt najpierw pojawia mi się defaultowy cursor pointer (łapka), a dopiero później zmienia się na ten z url'a.
Czy jest jakaś możliwość, żeby pozbyć się tej migawki?

Spróbuj umieścić na stronie ukrytą grafikę z tym cursor.png i zobacz, czy pomoże.

Albo, wg mnie bardziej cywilizowanie, dać w headzie:

<link rel="preload" href="img/cursor.png" as="image">

Można też się pobawić JS-em, ale o to pytaj raczej ludzi, którzy ten język znają, a nie mnie…