javascript - 当用户将鼠标悬停在元素的框阴影上时，如何显示工具提示？

Question

我有一个 1x1 像素的元素，它有一个更大的框阴影。 我希望在用户悬停时显示工具提示，但问题是工具提示仅在用户悬停在 1x1 像素区域上时激活，忽略了巨大的框阴影。

这个 fiddle 中的蓝色元素(发光)就是一个例子。我尝试使绿色元素 (glow2) 变大，只是为了显示工具提示的外观。

https://jsfiddle.net/fortunette/fLm3d7oz/1/

.glow {

        width: 1px;
        height: 1px;
        background-color: blue;
        border-radius: 50%;
        box-shadow: 0 0 24px 19px blue;
        position:absolute;
        top:300px;
        left:100px;
  }

其他要求是在任意位置和大小的任意数量的这些发光元素。

Answer 1

创建 pseudo-elements与包括框阴影在内的整个 div 区域大小相同。

伪元素叠加层可以是透明。然后使用伪元素的 :hover 状态来触发工具提示。

工作示例:

.glow {
  width: 1px;
  height: 1px;
  background-color: blue;
  border-radius: 50%;
  box-shadow: 0 0 24px 19px blue;
  position: relative;
  margin: 2em;
}

.glow:after {
  content: "";
  display: block;
  height: 50px;
  width: 50px;
  position: absolute;
  top: -25px; /* needs to be half of height and width */
  left: -25px; /* needs to be half of height and width */
  border-radius: 50%;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.glow .tooltiptext {
  display: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0; /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.glow:hover:hover .tooltiptext {
  display: block;
}

<div class="glow"><span class="tooltiptext">Tooltip text</span></div>