css - 将鼠标悬停在按钮上时无法显示光标

Question

我创建了这个 HTML

<span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn"></span>

并希望在我滑过它时出现一个光标(指针)。所以我添加了这个 CSS

.buttonContainer {
    margin: 0 0 15px 0;
    text-rendering: optimizeLegibility;
    cursor: pointer;
}

但是当我将鼠标悬停在按钮上方时没有出现指针。我创建了这个 JS fiddle 来说明问题 — https://jsfiddle.net/pj528mqo/2/ .

当我将鼠标悬停在相关按钮上方时，有什么想法可以让光标出现吗？

Answer 1

容器内的按钮大小相同，悬停时不显示光标。您可以添加此规则以使容器内的所有元素在悬停时显示光标:

.buttonContainer *:hover {
    cursor: pointer;
}

工作示例:https://jsfiddle.net/49noydup/ .