隐藏网页上对象的光标

Question

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

这是我正在使用的但我没有做到。

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

cursor:none无效。请告诉我任何方法。

Answer 1

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

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 。

Answer 2

是的尝试使用div：

您的HTML：

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

Answer 3

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

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

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

http://caniuse.com/pointer-events