Question

当e-resize和mousedown事件发生时，我无法将光标变为mousemove。我以某种方式设法做到了，但后来它不再起作用，我忘了我是如何让它工作的。

以下是jsFiddle中的示例，当您拖动手柄栏时，光标不会更改为e-resize。

我认为存在某种不正确的cursor: e-resize作业。

这是当前的css：

.container {
    width: 500px;
    height: 300px;
    box-sizing: border-box;
}
.splitter {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.splitter.vertical .leftPane {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    background-color: blue;
    margin-right: 5px;
    right: 25%;
    z-index: 1;
}
.splitter.vertical .rightPane {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: red;
    left: auto;
    width: 25%;
    z-index: 1;
}
.splitter.vertical .handleBar {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background-color: green;
    right: 25%;
    width: 5px;
    margin-left: -5px;
    z-index: 1;
    cursor: e-resize;
}
.splitter.active .handleClone {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: green;
    width: 5px;
    cursor: e-resize;
    z-index: 3;
}
.splitter .content-overlay {
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
    background-color: black;
}
.splitter.active .content-overlay {
    display: block;
}
.splitter.active {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: e-resize;
}
.splitter.hide-right .handleBar {
    display: none !important;
}
.splitter.hide-right .rightPane {
    display: none !important;
}
.splitter.hide-right .leftPane {
    right: 0 !important;
    margin-right: 0 !important;
}

Answer 1

问题是Chrome认为您要选择任何可能存在的文本，以便更改光标，就像突出显示文本一样。选择开始时，您可以阻止默认操作，包括更改光标。

我添加了这一行：

container[0].onselectstart = function(e){e.preventDefault();return false;}

将它移动到您想要的位置，但它可以正常工作。

查看更新后的fiddle

在jQuery forum

上找到

修改

为了清晰起见，我会将该行移动到container.on（'mousemove'）

container.on('mousemove', function (e) { var rightPos = container.width() - (e.pageX - container.offset().left); this.onselectstart = function(e){e.preventDefault();return false;} handleClone.css({ right: rightPos - 2 }); })

Answer 2

您是否尝试过使用javascript来解决问题？对元素执行事件处理程序onmousedown和onmouseup，并使它们运行如下函数：

    function mousecursor() { 
    document.getElementById("mygreatid").style.cursor = "eResize"; 
    }

希望有所帮助：）

如何覆盖mousedown，mousemove上的默认“文本”光标？

2 个答案: