是否可以将鼠标光标放在元素后面或鼠标光标是否具有z-index？ [英] Is it possible to put the mouse cursor behind an element or does the mouse cursor have an z-index?

问题描述

当鼠标悬停在某个元素上时，我想用自定义图像替换鼠标光标。我通过使用

先设置鼠标光标来实现它。

  cursor：none; 
 
  $ b  
 
  

然后我读出悬浮元素上的光标位置，并将图形的css位置设置为光标位置，略有偏移，因此鼠标光标不在图形上方，但仍在悬停区域上方。

我在这里做了一个小提琴：
http ：//jsfiddle.net/TimG/6XeWK/

现在它静静地工作了。问题只是当你移动鼠标非常快，鼠标光标离开悬停区域，并滑倒在图像上，当然使得不可能确定相对于悬停区域的鼠标位置（非常快地移动到左下角在黑色悬停区域）。我可以通过将图形设置为

来使它更难以从悬停区域中滑出。

  display：none; 
 

之前的图像css位置更改后，更改后将其设置为

  display：block; 
  

。不幸的是，它不能完全防止这个问题。

所以：有什么办法防止这种情况吗？还是有办法把鼠标光标放在手的后面？种类似的设置z索引的鼠标光标（我的猜测是，它是不可能的，因为它是没有DOM元素）？

Thx任何帮助。

解决方案

问题

有没有办法把鼠标光标放在手的后面？

当你移动鼠标时你看到鼠标指针的原因是偶尔会出现光标 over 的指针，因此不会应用 .hoverbox：hover 样式。

在 mousemove 事件绑定中添加css样式 cursor：none 也到指针，你不应该看到鼠标指针，即使不小心移动手上。将 cursor：none 应用于CSS中的 .pointer：hover 不起作用。

  $（。hoverBox）。mousemove（function（e）{
 var tWidth = $（window）.width 
 var position = $（this）.position（）; 
 var fingerPosition = position.top + e.clientY + 15; 
 var fingerWidth = $ （'.pointer'）。width（）; 
 
 $（'。pointer'）css（'display'，'none'）。css（'top'，fingerPosition） left'，e.clientX  -  fingerWidth  -  15）.css（'display'，'block'）。css（'cursor'，'none'）; 
} 
  

DEMO - 隐藏光标超过指针

编辑

我无法获取 cursor：url（）在fiddler工作，但我猜这主要是因为fiddler渲染输出槽 fiddle.jshell.net ，并且映像可能必须是服务器本地的。

但如果你想使用的是一个指针，你总是可以使用 cursor：pointer style

CSS：

  .hoverBox {
 width：400px; 
 height：300px; 
 background：black; 
 cursor：pointer; 
} 
  

DEMO - 使用默认指针光标

I would like to replace the mouse cursor with an custom image when the mouse hovers over a certain element. I do it by setting the mouse curser off first with

cursor: none;

when it hovers the element.

Then I read out the cursor position on the hovered element and set the css position of a graphic to the cursor position with a slight offset, so that the mouse curser is not over the graphic but still over the hover area.

I made a fiddle here: http://jsfiddle.net/TimG/6XeWK/

Now it works quiet allright. The problem is just when you move the mouse very fast, the mouse cursor leaves the hover area and "slips" over the image what of course makes it impossible to determine the mouse position relative to the hover area (move very fast to the bottom left on the black hover area). I could make it a little harder to slip out of the hover area by setting the graphic to

display: none;

before the images' css position is changed and after it is changed setting it to

display: block;

again. Unfortunately it does not prevent this problem fully.

So: Is there any way of preventing this? Or is there a way to put the mouse cursor behind the hand? Kind of like setting a z-index to the mouse-cursor (my guess is, that it would not be possible, as it is no DOM element)?

Thx for any help.

解决方案

Question

is there a way to put the mouse cursor behind the hand?

The reason you see the mouse pointer when you move the mouse fast is that you occasionally end up with the cursor over the pointer, thus the .hoverbox:hover style is not applied.

In your mousemove event binding add the css style for cursor: none also to the pointer and you should not see the mouse pointer at all anymore even when accidentally moving over the hand. Applying the cursor: none to the .pointer:hover in CSS does not work as well.

$(".hoverBox").mousemove(function(e) {
    var tWidth = $(window).width();
    var position = $(this).position();
    var fingerPosition = position.top + e.clientY + 15;
    var fingerWidth = $(this).parent().find('.pointer').width();

    $('.pointer').css('display', 'none').css('top', fingerPosition).css('left', e.clientX - fingerWidth - 15).css('display', 'block').css('cursor', 'none');
});

DEMO - Hiding cursor when over pointer

Edit
I could not get the cursor: url() to work in fiddler but I'm guessing this is mainly down to the fact that fiddler renders output trough fiddle.jshell.net and the image might have to be local to the server.

But if all you want to use is a pointer-hand, you could always use the cursor: pointer style as well.

CSS:

.hoverBox {
    width: 400px;
    height: 300px;
    background: black;
    cursor: pointer;
}

DEMO - Using the default pointer cursor

这篇关于是否可以将鼠标光标放在元素后面或鼠标光标是否具有z-index？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！