當我向工具提示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來完成你所需要的，它沒有打破懸停工具提示的錯誤。

在這裏它是在動作（I也限定的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>

Answer 2

的content CSS規則沒有它聽起來就像它取代了一個元素的內容。

我不確定你要在這裏完成什麼。您可以將content替換爲background-image，或者僅包含<img/>標記，並刪除content規則。