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

【问题标题】：Make the cursor invisible when a user hovers over a div当用户将鼠标悬停在 div 上时使光标不可见
【发布时间】：2015-01-27 18:14:05
【问题描述】：

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

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

提前致谢。

【问题讨论】：

请不要。只是不要。
@T.J. Crowder：非常正确，虽然你应该说为什么。根据您的评论，在下面添加了我的答案的替代方案。

标签： html css

【解决方案1】：

一个简单的光标样式就可以了，但由于光标仅在“悬停”时可见，因此您无需在样式中添加:hover。只需使用：

.mouse-invisible{
    cursor:none;
}

作为@T.J. Crowder 提示，根本不让用户看到光标，这是一种糟糕的用户体验。最好用更精细的光标（比如crosshair）来代替对象，这样对象就不会那么模糊了：

例如

.mouse-invisible{
    cursor:crosshair;
}

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

【讨论】：

【解决方案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>

【讨论】：

:hover 不需要像@TrueBlueAussie 说的那样。我编辑了。
@jbutler483 真的！最初是为了保留 OP 的编码风格，但当然最好使用适当的 CSS。我编辑了。
@jbutler483 谢谢，这样更性感（也更容易理解）。

【解决方案3】：

试试下面的代码

.mouse-invisible{
    cursor: none;
}

Know more about CSS cursor Property

JSFIDDLE DEMO

【讨论】：

hover 是多余的......光标何时可见？ :)
我的意思是：cursor 是一种从不需要 hover 的样式，因为它只发生在 鼠标悬停在元素上！ :)