Html 和 Css 悬停函数答案

【问题标题】：Html and Css Hover FunctionsHtml 和 Css 悬停函数
【发布时间】：2015-11-12 15:27:51
【问题描述】：

您好，我是 html 和 css 的新手，当我将鼠标悬停在左侧的另一个文本上时，我想在右侧显示一个文本。我在左侧显示了一个文本列表，这是它的 cod

<ul>
    <li id="what">What Is Eco Flash?</li>
    <br>
    <li id="water">We Coneserve Water!</li>
    <br>
    <li id="chemicals">Chemicals Reduction!</a>
    </li>
    <br>
    <li id="waste">No Waste-Water Run Off</li>
</ul>

这是我要在左侧显示的列表的 css 代码

width:25%;
text-align: left;
font-family: 'Copperplate Gothic Light';
font-size: 20px;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
margin:.2em;
display: list-item;

现在我要添加的是列表中每个项目的简短说明文本，当我将鼠标悬停在它们上时，它们会显示在右侧。

我是 html 和 css 的新手，我尝试过垃圾邮件，但它出现在文本下方。如何让解释文本出现在右侧？

谢谢！

【问题讨论】：

标签： html css text hover

【解决方案1】：

我喜欢在父节点上使用:hover，然后像这样显示子节点：

Fiddle

ul li .description{
  display: none;
}
ul li:hover .description{
  display: inline;
}

<ul>
  <li id="what">What Is Eco Flash? <span class="description">Boom a description</span></li>
  <li id="water">We Coneserve Water! <span class="description">Boom a description again</span></li>
  <li id="chemicals">Chemicals Reduction!</li>
  <li id="waste">No Waste-Water Run Off</li>
</ul>

【讨论】：

【解决方案2】：

如果您不想为列表元素添加额外的标记，您可以在 CSS 中使用 data- 属性和 :after 伪类。我意识到这可能比您正在寻找的更高级，但它可能对未来的访问者有好处：

li:hover:after {
  content: attr(data-explanation);
  margin-left: 1em;
}

<ul>
    <li id="what" data-explanation="My explanation">What Is Eco Flash?</li>
    <li id="water">We Coneserve Water!</li>
    <li id="chemicals">Chemicals Reduction!</li>
    <li id="waste">No Waste-Water Run Off</li>
</ul>

【讨论】：

【解决方案3】：

您可以向li 添加一个新元素：

<li id="water">
   We Coneserve Water!
   <small>Explanation...</small>
</li>

默认隐藏：

li small{
   display:none;
}

然后在li悬停时显示：

li:hover small{
   display:inline;
}

【讨论】：