1

Есть тонкая полоска, ширину полоски менять нельзя. Курсор сложно навести на полосу, можно-ли увеличить зону нажатия на полосу не увеличивая саму полосу?

Возможно ли такое сделать?

function ChangeColor() {
  document.getElementsByClassName("line")[0].style.backgroundColor = "blue";
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
}

.line {
  background-color: red;
  height: 2px;
  width: 100%;
  cursor: pointer;
}
<div class="container">
  <div class="line" onClick="ChangeColor()"></div>
</div>

2
  • 1
    повесьте клик на контейнер и увеличивайте его, а линию не трогайте
    – ThisMan
    15 июл 2019 в 14:13
  • необходимо либо добавлять еще одну невидимую но толстую область поверх линии, либо считать расстояние от курсора до линии и тогда менять курсор и обрабатывать клик, но уже на документе... 15 июл 2019 в 14:14

2 ответа 2

3

Добавьте в .line псевдоэлемент.
Видно его не будет, а вот target от родителя перейдёт к нему.

(p.s. сделал ему фон, чтобы видеть зону таргета)

function ChangeColor() {
  document.getElementsByClassName("line")[0].style.backgroundColor = "blue";
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
}

.line {
  background-color: red;
  height: 2px;
  width: 100%;
  cursor: pointer;
}

.line::before {
  content: '';
  display: block;
  width: 100%;
  height: 50px;
  margin-top: -25px;
  background: rgba(0,255,0,.15)
}
<div class="container">
  <div class="line" onClick="ChangeColor()"></div>
</div>

1
  • 1
    Вполне рабочий вариант =) 15 июл 2019 в 14:32
2

Вот так можно увеличить активную область, посчитав расстояние от курсора до линии.

Если линия не прямая - решение будет сложнее

container.addEventListener('mousemove', function (e) {
  container.style.cursor = isTooClose(e.y ) ? 'pointer' : 'default'
})

container.addEventListener('click', function (e) {
  if (isTooClose(e.y)) line.style.backgroundColor = `hsl(${Math.random()*360},65%,65%)`;
})

function isTooClose(y){
  return Math.abs(y - line.getBoundingClientRect().y) <10;
}
#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
}

#line {
  background-color: red;
  height: 2px;
  width: 100%;
}
<div id="container">
  <div id="line"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.