在CSS中显示隐藏的webbot

Question

我尝试过使用下面链接中的场景来显示隐藏文本，当鼠标移到文本上时。它可以很好地处理文本，但是我的客户需要的是隐藏webbot HitCounter，并在他们放置鼠标时显示它。任何帮助都将不胜感激。

Show hidden text on hover (CSS)

<div id="DivForHoverItem">
            <div id="HiddenText"><p class="auto-style4">
                <!--webbot bot="HitCounter" i-image="0" I-ResetValue="0" I-Digits="0" U-Custom --></p></div>
          </div>
        </div>

CSS代码：

/* Div for hover item */
#DivForHoverItem {
    height: 50px;
    width: 300px;
    background-color: black;
    text-align:center;
}

#HiddenText {
    display:none;
}

#DivForHoverItem:hover #HiddenText {
    display:block;
}

Answer 1

请记住，display:none“删除”元素(div不占用空间)。因此，您没有什么可以用游标指向的(没有创建另一个大小固定的包装div/div，或者将其转换为js和另一个元素的条件)来启动悬停效果。

也许是外包装的div？也许是visibility: hidden就位，display:none？也许改变Z-Index？或者是计数器顶部的另一个div (用背景纯色覆盖它)，在悬停时有α透明度变化(甚至会淡出css动画)？