Question

我正在关注本教程：http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_transition

但是我希望“将鼠标悬停在我身上”文本旁边的“当您将鼠标移到下面的文本上时，工具提示文本将淡入并需要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>

Answer 1

如何更改结构，将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元素，因此，它不允许其中的其他block元素（例如{{ 1}}）。 <div>代码不是<span>，而是block，允许您将其放在inline代码的旁边。通常情况下，当我们要编辑<p>代码内的文字时，我们会使用<span>代码，因为它不会将<p>代码中的文字分成新的行，如{<span> 1}}或第二个<div>标记可以执行（正如您在示例中看到的那样。

Answer 2

这是两行的原因是包含指令的段落标记是块级元素。这意味着它将开始和结束一条新线。您可以将css中此元素的显示设置为内联，并将文本显示为内联。

p{
    display: inline;
}

工具提示CSS：删除新行

2 个答案: