Question

我正在创建一个简单的HTML DIV分割器，我将其设置为col-resize。我希望在拖动分割器时光标可以调整大小，但是如果拖动鼠标不在分割器上（例如超过调整大小边界），则光标将不再重新调整大小。 HTML：

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right">
</div>

CSS：

#container {
    position: relative;
}

#left {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 200px;
    height: 200px;
    outline: 2px solid red;
}

#right {
    position: absolute;
    left: 202px;
    top: 2px;
    width: 300px;
    height: 200px;
    outline: 2px solid blue;
}

#splitter {
    position: absolute;
    left:202px;
    top: 2px;
    height: 200px;
    z-index: 2;
    cursor: col-resize;
    width: 8px;
}

#splitter.active {
    background-color: gray;
}

我遇到的另一个问题是：我希望当鼠标按下并拖动时背景颜色为灰色，但是当鼠标向上或完成拖动时没有颜色，但是如果鼠标在分割器之外，则鼠标事件将无法成为烧成。

$("#splitter").on("mousedown mouseup", function() {
    $(this).toggleClass("active");});

jsFiddle链接在这里：http://jsfiddle.net/Shuping/MhYuK/ 有什么建议吗？

Answer 1

你没有给出其他条件。

试试这个，可能是？

$("#splitter").on("mousedown", function() {
    $(this).addClass("active");
});

$("#splitter").on("mouseup mouseleave", function() {
    $(this).removeClass("active");
});

带有JavaScript事件的HTML DIV分割器

1 个答案:

你没有给出其他条件。