Javascript 工具提示CSS：删除新行_Javascript_Html_Css

Javascript 工具提示CSS：删除新行

javascript html css

Javascript 工具提示CSS：删除新行,javascript,html,css,Javascript,Html,Css,我将遵循本教程：但是我想在“当你将鼠标移到下面的文本上时，工具提示文本将淡入，并在1秒后从完全不可见变为可见”旁边添加“悬停在我上方”文本例如，理想的输出是：将鼠标移到下面的文本上时，工具提示文本将显示淡入并用1秒时间从完全不可见变为可见。在我上方悬停而不是将鼠标移到下面的文本上时，工具提示文本将显示淡入并用1秒时间从完全不可见变为可见在我上方悬停工具提示显然仍应显示在悬停状态。我需要更改CSS的哪一部分 <!DOCTYPE html> <html>

我将遵循本教程：

但是我想在“当你将鼠标移到下面的文本上时，工具提示文本将淡入，并在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>


.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
位置：绝对位置；
z指数：1；
底部：100%；
左：50%；
左边距：-60px；
/*淡入工具提示-从0%到100%opac需要1秒：*/
不透明度：0；
过渡：不透明度1s；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
不透明度：1；
}
悬停时淡入工具提示
将鼠标移到下面的文本上时，工具提示文本将淡入，从完全不可见变为可见需要1秒时间
在我上空盘旋
提示文本

稍微改变一下结构怎么样？将

悬停在我上方的文本放在
而不是
中，然后将其放在
标记中，如下所示：
<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>


悬停时淡入工具提示
将鼠标移到下面的文本上时，工具提示文本将淡入，从完全不可见变为可见需要1秒时间。在我上空盘旋
提示文本


这里有一个显示它
让我再解释一下：在HTML中，
标记是一个块
元素，因此，它不能允许其他块
元素在其内部（例如
）。
标记不是块
，而是内联
，允许您将其放置在
标记的一侧。通常，当我们想要编辑标记中的文本时，我们会使用标记，因为它不会像或第二个标记那样将标记中的文本拆分为新行（正如您在示例中所看到的。
之所以出现在两行上，是因为包含指令的段落标记是一个块级元素。这意味着它将开始和结束一个新行。您可以将此元素在css中的显示设置为内联，并应将文本显示为内联
p{
    display: inline;
}