悬停在 div 上时将光标更改为 png

Question

我试图将鼠标悬停在卡片 div 上时将光标更改为 png，卡片 div 是 owl-carousel 的一部分。卡片 div 包含一个带有指向 GitHub.

的 href 的标签

<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;
}

它适用于其他没有 href 的

Answer 1

尝试将其设置为 .projects .card a{} 即可。

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

悬停在 div 上时将光标更改为 png

change cursor to png when hover over div

html

css

owl-carousel

mouse-cursor