从网页上的对象中隐藏光标答案

【问题标题】：Hide cursor from objects on the webpage从网页上的对象中隐藏光标
【发布时间】：2014-03-08 07:21:08
【问题描述】：

每当有人越过object 标签时，我想隐藏我的鼠标光标。但是cursor:none 不适用于对象，而它适用于页面的其余部分。

这是我正在使用的，但我做不到。

<object id="obj" class="obj" style="cursor:none;" data='bla-bla.pdf' 
    type='application/pdf' 
    width='1000px' 
    height='640px'>

cursor:none 不工作。请告诉我有什么方法可以做到这一点。

【问题讨论】：

【解决方案1】：

这样的事情怎么样：http://jsfiddle.net/ZBv22/

它在您指定cursor:none 的对象元素上应用掩码。

唯一的问题是您是否需要可点击/交互的对象。根据您的目标浏览器（现代，IE11+），您可以添加 pointer-events: none 来解决这个问题。

【讨论】：

【解决方案2】：

是的，尝试使用 div：

您的 HTML：

<div style="cursor:none;">
    <object id="obj" class="obj" data='bla-bla.pdf' type='application/pdf' 
     width='1000px' height='640px'>
</div>

【讨论】：

【解决方案3】：

只需使用叠加层； <object>s 可以表现得很有趣。

HTML：

<div id="obj_container">
    <object id="obj" src="blablabla.pdf"></object>
    <div id="obj_overlay"></div>
</div>

CSS：

#obj_container{
    position:relative;
}
#obj{
    position:absolute;top:0;left:0;
    z-index:2;cursor:none;
}

查看此JSFiddle demo了解更完整的代码。

【讨论】：