主页 / 问题 / 1150291
Accepted
IWProgrammer
Asked:2020-07-08 13:12:17 +0000 UTC2020-07-08 13:12:17 +0000 UTC

悬停时块的外观，但要让它在一个小的失误时块不会消失

  • 772

有一个代码（如下）。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>

html

2 个回答

  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
  2. Best Answer

    您可以使用父级内部的其他元素来更改目标区域。
    我发现为此使用伪元素很方便。

    这是一个例子：

    .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

相关问题