自定义滑块手柄捕捉光标

Question

我使用的是一个完全普通的jQuery滑块，我使用以下CSS缩小了它的手柄:

html body .ui-slider .ui-slider-handle {
    width: 10px;
}

这具有缩小滑块手柄的预期效果，但它有一个不希望的副作用，即当我试图拖动它时，使手柄固定在光标左侧的位置。

是什么原因导致的，我该如何修改这种行为?

Answer 1

这是因为.ui-slider .ui-slider-handle在CSS中使用了margin-left。

当您更改width时，请确保也更改margin-left。

.ui-slider .ui-slider-handle {
    width: 10px;
    margin-left: -.3em; /*change this*/
}

演示:http://jsfiddle.net/dirtyd77/Z7pW3/6/