Question

我有一个1x1像素的元素，盒子阴影要大得多。我想在用户徘徊时显示工具提示，但问题是工具提示仅在用户盘旋在1x1 px区域时激活，忽略巨大的盒子阴影。

这个小提琴中的蓝色元素（发光）就是一个例子。我尝试将绿色元素（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

创建与div的整个区域大小相同的pseudo-elements，包括box-shadow。

伪元素叠加层可以是透明。然后使用: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>

Answer 2

框阴影不是框html元素的一部分，这就是您的工具提示未显示的原因。我建议你用div包装你的盒子并使用外部div上的工具提示，它也包含你的盒子阴影。当然，您必须向外部div添加填充，以便它完全包含框阴影。这样，当用户将鼠标悬停在框阴影上时，它们实际上是悬停在外部div的顶部，工具提示将显示出来。您可以使用谷歌浏览器开发工具（ctrl + shift + i）来查看您需要多少填充。在外部div类上使用：hover或JqueryUI工具提示。希望这有帮助！

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

2 个答案: