javascript - 为什么当我将内容标签添加到工具提示 div 时我的计数器会中断？

Question

我一直在研究这个工具提示步骤，以构建对某事的最终看法，并且想知道我做错了。当我添加内容标签时它消失的片段请参阅 css 注释并且笔在这里 CodePen :

代码:

var i = 0;

setInterval(function() {
  i++
  num.innerHTML = i;
  //alert(i);
}, 300);

.tooltip {
  /* breaks counter/shows image
  content:url(https://lh4.ggpht.com/-rsFqlsSeJUY/WB1eA3b3kWI/AAAAAAEd_WM/mCCZbkZP_XA/w50-h50-c/socialfeed.info-you-magazine.jpg);
  */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(50%, 50%);
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
#you {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(50%, 50%);
}
#num {
  float: right
}

<p>
  <div id="you" class="tooltip">Hover over me
    <span id="num" class="tooltiptext">Tooltip text</span>
  </div>

<!--
  counter on number
  <div class="tooltip">Hover over me
    <span id="num" class="tooltiptext">Tooltip text</span>
  </div>
-->

Answer 1

content CSS 属性与 ::before 和 ::after 伪元素一起使用以在元素中生成内容(source ).它不适用于普通元素，这就是您遇到问题的原因。

你应该使用 background-image 来完成你需要的，它没有破坏悬停工具提示的错误。

这是实际操作(我还定义了容器的 width 和 height):

var i = 0;

setInterval(function() {
  i++
  num.innerHTML = i;
  //alert(i);
}, 300);

.tooltip {
  background-image: url(https://lh4.ggpht.com/-rsFqlsSeJUY/WB1eA3b3kWI/AAAAAAEd_WM/mCCZbkZP_XA/w50-h50-c/socialfeed.info-you-magazine.jpg);
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(50%, 50%);
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
#you {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(50%, 50%);
}
#num {
  float: right
}

<p>
  <div id="you" class="tooltip">Hover over me
    <span id="num" class="tooltiptext">Tooltip text</span>
  </div>