时间戳

首页 > 解决方案 > 在文档正文之外设置光标样式

css - 在文档正文之外设置光标样式

问题描述

我有一个视力不佳的学生，正在使用替代光标。我使用 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%;
}

标签： css

解决方案

好的，感谢您的阅读，我刚刚弄清楚了如何做到这一点：

代替

body { height: 100%; }

我用了

body { height: 100vh; }

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

推荐阅读