How to override default "text" cursor on mousedown, mousemove?

How to override default "text" cursor on mousedown, mousemove?

I can't get cursor to be e-resize when mousedown and mousemove events are
happening. I did somehow manage to do that, but then it didn't work
anymore and I forgot how I got it to work.
Here is example in jsFiddle , when you drag handle bar it cursor does not
change to e-resize as it should.
I'm thinking there is some kind of incorrect cursor: e-resize assignment.
Here is current 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;
}