增加jQuery滑块控制柄可点击区域
增加jQuery滑块控制柄可点击区域
提问于 2015-08-12 06:57:58
我希望增加jQuery滑块手柄上的可点击区域。但是，我不想增加元素的视觉大小。我不想要一个巨大的把手。我只想捕获手柄左侧和右侧的单击，比如10个像素，这样更容易“抓取”手柄。有什么想法吗？我必须在那里附加透明的div吗？
回答 1
Stack Overflow用户
发布于 2015-08-12 07:19:49
我使用CSS ::after创建了一个pseudo-element，取得了一些成功。
但我不能说这是最有效的解决方案。
在下面的示例中，我创建了一个伪元素，它扩展了2em，超过了左右的句柄，增加了它的“命中区域”。
我不喜欢它奇形怪状的“活动状态”边框。
$("#slider").slider({
orientation: "vertical"
});div#slider {
margin: 3em;
}
span.ui-slider-handle::after {
content: "";
display: block;
position: absolute;
width: 1.2em;
height: 1.2em;
padding: 0 2em;
left: -2em;
cursor: pointer;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<div id="slider"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31953377
复制相关文章
相似问题
腾讯云开发者
