change cursor to png when hover over div-CodePudding

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 >
                    <div >
                        <a href="https://github.com/" target="_blank" rel="noopener noreferrer">
                            <img  src="res/server-client.svg" alt="" >
                            <div >
                                <span >
                                    <b>Server-Client</b> 
                                </span>
                                <span>
                                    <br>HI
                                </span>
                            </div>
                            <div >
                                <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.

CodePudding user response：

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

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