Prielsmemnten
New Member
I am making a simple HTML DIV splitter, I set the cursor for it as col-resize. I want the cursor to be col-resize when I drag the splitter, however if the dragging mouse is not on the splitter (e.g. exceeds the resize boundary) the cursor will not be col-resize any more. The HTML:\[code\]<div id="container"> <div id="left"></div> <div id="splitter"></div> <div id="right"></div>\[/code\]The CSS:\[code\]#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;}\[/code\]Another problem I meet is: I want the background color to be gray when mouse is down and dragging but be no color when mouse up or finish dragging, however if the mouse is outside of the splitter the mouseup event will fail to be fired.\[code\]$("#splitter").on("mousedown mouseup", function() { $(this).toggleClass("active");});?\[/code\]The jsFiddle link is here: http://jsfiddle.net/Shuping/MhYuK/Any suggestion?