如何在 div 内的按钮上显示手形光标？答案

【问题标题】：how to show hand cursor on a button which is inside a div?如何在 div 内的按钮上显示手形光标？
【发布时间】：2020-02-05 10:21:44
【问题描述】：

我有一个在 div 里面的按钮

.calculateActivityBtn {
    float: left;
    margin-right: 1px;
    cursor: pointer;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    cursor: pointer
}

<div class="calculateActivityBtn">
    <div class="pagination centered">
        <div class="btn btn-primary" id="getFilesButton" title="<%= language['UI.reports.tooltip.getFilesButton'] %>"><i class="glyphicon glyphicon-stats">button text</i></div>
    </div>
</div>

当我将鼠标悬停在 div 上时，它会在 chrome 中给我一个手形光标，但在 Firefox 中它不会向我显示手形光标，直到指针到达按钮图标。

我已尝试更改两个 div 的 z-index 并更改 css 中的 cursor:pointer。

我想要一个手形光标，在 Firefox 中也可以将鼠标悬停在 div 上。

【问题讨论】：

在您在这里与我们分享的代码中，没有cursor:pointer; 或者无论我在哪个浏览器中悬停都没有。您能否更新您的问题，以便我们至少可以重现您所描述的内容？
只要cursor: pointer; 在任何浏览器中都可以解决问题。
@Joschi 还有其他方法可以放置 cursor:pointer 吗？
@Pri_stack 不确定，因为这总是有效 ;)

标签： html css

【解决方案1】：

只需在pagination div 中使用Padding 而不是margin.. 检查更新的 sn-p...

.calculateActivityBtn {
    float: left;
    margin-right: 1px;
    cursor: pointer;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    padding: 20px 0;
    border-radius: 4px;
    cursor: pointer;
    background: red;
}

<div class="calculateActivityBtn">
    <div class="pagination centered">
        <div class="btn btn-primary" id="getFilesButton" title="<%= language['UI.reports.tooltip.getFilesButton'] %>">
          <i class="glyphicon glyphicon-stats">button text</i>  
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

使用这个 CSS

.pagination:hover #getFilesButton{
cursor: pointer;
}

并确保支持任何特定的浏览器浏览器对光标的支持你可以在这里查看

Caniuse cursor supported

希望，它会起作用。如果您需要更多帮助，请告诉我

【讨论】：

检查`指针事件：自动；光标：指针；` 如果您有 z-index 属性，请尝试删除并查看控制台是否有宽度、高度。如果仍然无法正常工作，请清楚地分享您的 sn-p。