CODEWITHSUNDEEP
javascripthtmlcsshovercursor
Maksim Morozov
Maksim Morozov

Reputation: 11

How do I change cursor size on hover in css

I'm trying to change cursor size on hovering h1 in css, without using js and .gif cursors

<div class="container">
        <h1 class="header">text here</h1>
</div>

<div class="cursor"></div>

Here's css

.cursor {
    pointer-events: none;
    position: fixed;
    padding: 0.3rem;
    border: 1px solid #ebe8e8;
    border-radius: 50%;
    mix-blend-mode: difference;
    transition: transform 0.3s ease;
}

.header:hover + .cursor {
    transform: translate(-50%, -50%) scale(8);
}

Why is it not working?..

Upvotes: 1

Views: 3205

Answers (1)

Nengak dakup
Nengak dakup

Reputation: 88

.header:hover .cursor {
    transform: translate(-50%, -50%) scale(8);
}

Upvotes: 1

Related Questions