CSS工具提示：刪除新行

我下面這個教程：http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_transition CSS工具提示：刪除新行

但我想旁邊的「當你將鼠標移動到下面的文本，該工具提示「將鼠標懸停在我」的文字文字會淡入，並且需要1秒從完全不可見變爲可見。「

例如，理想的輸出將是：

當你將鼠標移動到下面的文字，提示文本將淡入和需要1其次從完全無形到有形去。 將鼠標懸停在我

，而不是

當您在下面的文本上移動鼠標時，工具提示文本將淡入和需要1其次從完全看不見去可見。

將鼠標懸停在我

刀尖顯然應仍出現在懸停。我需要更改哪部分CSS？

<!DOCTYPE html> 
<html> 
<style> 
.tooltip { 
    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: absolute; 
    z-index: 1; 
    bottom: 100%; 
    left: 50%; 
    margin-left: -60px; 

    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ 
    opacity: 0; 
    transition: opacity 1s; 
} 

.tooltip:hover .tooltiptext { 
    visibility: visible; 
    opacity: 1; 
} 
</style> 
<body style="text-align:center;"> 

<h2>Fade In Tooltip on Hover</h2> 
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p> 

<div class="tooltip">Hover over me 
    <span class="tooltiptext">Tooltip text</span> 
</div> 

</body> 
</html>

來源

2016-06-23 dan139

關於更改結構的稍微放什麼Hover over me文本在<span>而不是<div>，然後把該<p>標籤像這裏面：

<body style="text-align:center;"> 
<h2>Fade In Tooltip on Hover</h2> 
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible. <span class="tooltip">Hover over me 
    <span class="tooltiptext">Tooltip text</span> 
</span></p> 
</body>

這裏是一個JS Fiddle表現它

讓我稍微解釋一下：在HTML中，<p>標記是block元素，而th我們，它不能允許其他block元素在裏面（如<div>）。 <span>標記不是block，它是inline，允許您將它放在<p>標記的旁邊。當我們想要編輯<p>標籤中的文本時，我們通常會使用<span>標籤，因爲它不會將<span>標籤中的文本拆分爲新行，如<div>或第二個<p>標籤會這樣做（正如您在您的例如：

來源

2016-06-23 17:53:52 blubberbo

這是兩行的原因是包含指令的段落標記是一個塊級別的元素，意味着它將開始並結束一個新行，你可以在css中將這個元素的顯示設置爲內聯它應該顯示爲內聯文字。

p{ 
    display: inline; 
}

來源

2016-06-23 17:59:51 BrianDiesel

CSS工具提示：刪除新行

回答

相關問題