当用户将鼠标悬停在div上时，使光标不可见

Question

当用户将鼠标悬停在特定div上时，我想让光标指针不可见。

<div class="holder" style="width:200;height:200">
    <div class="mouse-invisible"  style="width:50;height:50">
          Dare to Hover Me !!!
    </div>
 </div>

提前致谢。

Answer 1

一个简单的光标样式可以，但因为光标只能在＆＃34; hover＆＃34;您不需要在样式中添加:hover。只需使用：

.mouse-invisible{
    cursor:none;
}

作为@ T.J。 Crowder 暗示，将光标隐藏在用户之外，这是一种糟糕的用户体验。最好用一个更精细的光标（比如crosshair）替换，以使对象不那么模糊：

e.g。

.mouse-invisible{
    cursor:crosshair;
}

参考：http://www.w3schools.com/cssref/pr_class_cursor.asp

Answer 2

您必须使用CSS属性cursor并将其设置为none。

.mouse-invisible {
  cursor: none;
  width: 200px;
  height: 200px;
  background: red;
}
div {
  display: inline-block;
}

<div class="mouse-invisible">
  Dare to Hover Me !!!
</div>

Answer 3

尝试以下代码

.mouse-invisible{
    cursor: none;
}

Know more about CSS cursor Property

JSFIDDLE DEMO