将鼠标悬停在文本上以显示更多文本？答案

【问题标题】：Hover over text to show more text?将鼠标悬停在文本上以显示更多文本？
【发布时间】：2014-03-30 05:15:41
【问题描述】：

如何将鼠标悬停在某个单词上，然后向右显示更多单词？

<div id="footer">
<center>
<p>Copyright 2014</p>
</center>
<center><a href="http://www.scriptiny.com/2010/09/fading-slideshow-script/" style="position:absolute; margin-top:20px; margin-left:-35px; text-decoration:none; color:gray; z-index:20;">Tinyfader.js</a> <p style=" margin-top:-38px;padding-top:20px; padding-left:572px; opacity:0; color:red; ">Released under Creative Commons License</p>

<center><a href="http://jquery.org/license" style="position: absolute; text-decoration:none; color:gray; margin-top:0px; margin-left:-50px; z-index:20;">Jquery-1.5.min.js</a> <p style="margin-top:-20px; padding-left:642px; opacity:0; color:red;">Dual licensed under the MIT or GPL Version 2 licenses</p>

<center><a href="http://jquery.org/license" style="position: absolute; text-decoration:none; color:gray; margin-top:0px; margin-left:-80px; z-index:20;">Jquery-ui-1.8.9.custom.min.js</a><p style="margin-top:-20px; padding-left:642px; opacity:0; color:red;">Dual licensed under the MIT or GPL Version 2 licenses</p>

<center><p style="margin-top:-18px;"><a href="http://sizzlejs.com/" style="position: absolute; text-decoration:none; color:gray; margin-top:-2px; margin-left:-25px; z-index:20;">Sizzle.js</a></center><p style="margin-top:-16px; padding-left:615px; opacity:0; color:red;">Released under the MIT, BSD, and GPL Licenses.</p>
</div>
</div>

【问题讨论】：

不要使用 <center> 标签，它们在 HTML5 中已被弃用。在你的 CSS 中使用 <div> 和 text-align: center

标签： jquery html css hover

【解决方案1】：

使用 CSS 非常简单。这是Fiddle demo。

HTML：

<p>My main text <span class="extra">My hidden text!</span></p>

CSS：

.extra { 
    display: none;
}

p:hover .extra {
    display: inline-block;
}

【讨论】：

【解决方案2】：

Jason 的 css 是最好的方法...只是想指出您使用了太多重复的 css 代码，并且不使用内联 css 是一种更好的做法，但应该在样式表上包含所有 css 并链接到它在你的头标签中。

您的页面将加载得更快。看看这篇文章：Programming Performance Rules

【讨论】：

【解决方案3】：

这里有一些您可能会觉得有趣且有用的东西，尽管它并不完全符合您的要求。您可以向元素添加title 属性，以一种工具提示方式显示文本。如果你只想要一个词，你会想在它周围加上一个跨度。

<p title="Here I am to save the day!">Superman</p>

Fiddle

【讨论】：

【解决方案4】：

您也可以使用引导工具提示 在这里查看更多。 Bootstrap Tooltips.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<span data-toggle="tooltip" data-placement="top" title="hover here to see more text. this is bootstrap Tooltip on the top">
  hover here to see more text...
</span>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

【讨论】：