當用戶將鼠標懸停在元素的框陰影上方時，如何顯示工具提示？

Question

我有一個1x1 px的元素，帶有更大的框陰影。 我希望每當用戶將鼠標懸停時都顯示工具提示，但是問題是，僅當用戶將鼠標懸停在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的整個區域（包括盒子陰影）大小相同的偽元素 。

偽元素疊加層可以是透明的 。 然后將: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添加填充，以便完全包含框陰影。 這樣，當用戶將鼠標懸停在框陰影上時，他們實際上是懸停在外部div上方，並且將顯示工具提示。 您可以使用Google Chrome開發工具（ctrl + shift + i）來查看需要多少填充。 在外部div類上使用a：懸停或JqueryUI工具提示。 希望這可以幫助！