将鼠标悬停在文字显示更多的文字？

Question

你怎么可以将鼠标悬停在某个单词，并在右边会显示更多的话？

<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>

Answer 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;
}

Answer 2

这里的东西，虽然这不是你问什么你可能会发现有趣和实用。您可以在title属性添加到您的元素，以显示一种时尚工具提示文字。你会希望把它周围的跨度如果你只是想一个字。

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

Fiddle

Answer 3

Jason的CSS是最好的办法......只是想指出的是您正在使用太多但却难免重复CSS代码，并在一个更好的做法是不要使用内联CSS，但应该有一个样式表和链接所有的CSS它在你的head标签。

页面加载速度更快。看看这篇文章：Programming Performance Rules