0

Есть код (представлен ниже). Мне нужно, чтобы появляющийся 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>

2 ответа 2

1

Вы можете внутри родителя использовать дополнительные элементы, чтобы изменить 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>

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

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;
}
1
  • не помогает, да и рамка становится больше, что неприемлимо 8 июл 2020 в 6:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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