Появление блока при наведении, но сделать так, чтобы при небольшом промахе блок не исчезал

Question

Есть код (представлен ниже). Мне нужно, чтобы появляющийся div не исчезал, если пользователь, пока наводил на него мышку, случайно вышел за границу блока span в пределах некоторой величины (скажем, 6px). Как это сделать?

.hint:hover>.hint_modal {
  display: inline-block;
}

.hint {
  width: 100px;
  height: 100px;
}

.hint_modal {
  display: none;
  color: #767c7e;
  border: #bcbcbc solid 0.5px;
  padding: 3px 1px 0 6px;
  margin-left: 10px;
}

<span class="hint">
    Наведите на меня
    <div class="hint_modal">
       Спрятанный блок
    </div>
</span>

Answer 1

.hint_modal {
  display: none;
  color: #767c7e;
  border: #00000000 solid 6px;
  padding: 3px 1px 0 6px;
  box-shadow:inset 0 0 0 1px #bcbcbc;
  margin-left: 10px;
}

Answer 2

Вы можете внутри родителя использовать дополнительные элементы, чтобы изменить target зону.
Мне удобно для этого использовать псевдоэлементы.

Вот пример:

.hint:hover .hint_wrap > .hint_modal {
  display: inline-block;
}

.hint {
  width: 100px;
  height: 100px;
  position: relative;
}

.hint_modal {
  display: none;
  color: #767c7e;
  border: #bcbcbc solid 0.5px;
  padding: 3px 1px 0 6px;
  margin-left: 10px;
}

.hint::before {
  content: '';
  display: block;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  position: absolute;
  left: -6px;
  top: -6px;
  background: rgba(255,0,0,.25);
  z-index: 1;
}

.hint_wrap {
  position: relative;
  z-index: 2;
}

<span class="hint">
    <span class="hint_wrap">
      Наведите на меня
      <div class="hint_modal">
         Спрятанный блок
      </div>
    </span>
</span>

Я выделил псевдоэлемент цветом, чтобы было видно новую зону взаимодействия.

БЛОГ НА HUSL

Появление блока при наведении, но сделать так, чтобы при небольшом промахе блок не исчезал

Ответы (2 шт):