javascript - 怎样扩大鼠标的响应范围?

Question

比如

html:

<p class='guides'></p>

css:

.guides{
      width: 100%;
      height: 1px;
      border-top:1px dashed #33ffff;
    }

将会显示一条蓝色虚线
但我若用鼠标去选择这条线,很不容易操作
能不能扩大这条线鼠标的响应范围?

Answer 1

如果不考虑 IE8 以下的浏览器可以这样写：

.guides{
      width: 100%;
      height: 10px;//也可以修改为你想要的控制范围
    }
    
.guides:before{
    content:"";
    width:100%;
    height:100%;
    display:block;
    border-top:1px dashed #33ffff;
}

Answer 2

给需要选中的dom添加到一个标签内，外标签自己定义宽高什么的css样式，背景透明就行，点击事件绑定到外部的标签上，选中的区域就变大了

Answer 3

padding?

Answer 4

给guides加一个父p然后点击那个父p触发相应操作

Answer 5

有很多实现的方式，比如写一个区域很大的空白标签，然后选择这个空白区域后修改这个蓝色虚线，或者用padding撑开一些，都是可以的