Question

我有一个视力不好的学生，并且正在使用其他光标。我使用css类来更改主体中的光标（仅适用于该瞳孔），但是在视口中不在主体中的区域中它会变回正常状态。无论如何，有一种我可以切换的方式为整个视口设置光标吗？

有问题的页面在视口的顶部有一个区域（用于询问数学问题），在左侧和右侧有带箭头的区域，可转到下一个和上一个问题，在底部有一个小区域，带有一个箭头。包含问题编号的div。透明的问题编号div固定在页面底部的位置，如果问题足够大，则可以覆盖问题文本。这是数百种类似程序共享的一种通用格式。在所有这些区域中，光标都将变为大光标，但不会转换为大的光标，因为它们不在文档正文中。当问题很大并且充满视口时，这不是问题。当问题较小时，这只是一个问题，因此问题文本和问题编号div之间存在间隙。我尝试将身体的高度和最小高度设置为100％，但没有效果。有什么办法我也可以在这些区域将光标更改为大光标吗？对于其他学生，必须有可能切换回自动光标。

js:
var bodyEl = document.getElementsByTagName("BODY")[0];
if (myPupil == 3){
    bodyEl.classList.add("bigCursor");
}
else {
    bodyEl.classList.remove("bigCursor");
}
css:
.bigCursor {
    cursor: url('../../../cursor/Giant Rainbow.cur'), auto;
}
.bigCursor :hover {
    cursor: url('../../../cursor/Giant Rainbow.cur'), auto;
}
body {
    height: 100%;
    min-height: 100%;
}

Answer 1

好的，感谢您的阅读，我已经弄清楚了如何做：

代替

body { height: 100%; }

我用过

body { height: 100vh; }

这导致主体填充视口，因此光标根据需要进行了转换。

在文档主体外部设置光标样式

1 个答案: