change cursor to png when hover over div

Question

I am trying to change the cursor to png when hovering over a card div, the card div is part of owl-carousel. The card div contains a tag with a href to the GitHub.

<div class="col eachCard">
                    <div class="card">
                        <a href="https://github.com/" target="_blank" rel="noopener noreferrer">
                            <img class="titleImage" src="res/server-client.svg" alt="" class="card-img-top">
                            <div class="card-body">
                                <span class="title">
                                    <b>Server-Client</b> 
                                </span>
                                <span>
                                    <br>HI
                                </span>
                            </div>
                            <div class="card-lang">
                                <img src="res/python.svg" alt="">
                            </div>
                        </a>
                    </div>
                </div>     

CSS:

.projects .card{
    background-color: transparent;
    width: 300px;
    height: 100%;
    overflow: hidden;
    cursor: url("/res/github.png"), default;
}

It works on other <img with no href, but does not work for this div, instead it's the windows finger cursor. Thanks for the help.

Answer 1

try to set it over .projects .card a{} will work.

.projects .card a{
    cursor: url("/res/github.png"), default;
}