Question

我一直致力于这个工具提示步骤，建立一个关于某事的最终观点，并且想知道我做错了。我添加内容标签时死亡的片段，请参阅css注释，笔就在这里 CodePen：

代码：

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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>
-->

＆＃13;

Answer 1

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

你应该使用background-image来完成你需要的东西，这不会有破坏你的悬停工具提示的错误。

这里有它（我还定义了容器的width和height）：

＆＃13;

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

＆＃13;

.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
}

＆＃13;

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

＆＃13;

Answer 2

content CSS规则执行它听起来的样子，它取代了元素的内容。

我不确定你在这里想要完成什么。您可以将content替换为background-image，或者只是添加<img/>代码并删除content规则。

当我向工具提示div添加内容标记时，为什么我的计数器会中断？

2 个答案: