1

我正在制作一个简单的 HTML DIV 拆分器，我将光标设置为 col-resize。我希望在拖动拆分器时光标是 col-resize，但是如果拖动鼠标不在拆分器上（例如超出调整大小边界），则光标将不再是 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;
}

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

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

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

4

1 回答 1

2

你没有给出 else 条件。

试试这个，可能吗？

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

$("#splitter").on("mouseup mouseleave", function() {
    $(this).removeClass("active");
});​
于 2012-12-29T16:36:17.250 回答