Problem:  Lots of text that it important to the page, but only if the user wants to see it.  This comes from displaying an rss feed.  I wanted to present the "headlines" of the feed and allow the user to view the details without a click. 

Solution:  CSS hover to display the text of each feed article.

Here is how it works.

1. I have a div tag for the headline, and inside of that a span tag for the article details.
<div>headline
<span> article </span>
</div>

2. I add a style element with a css class that assigns the span tag to not be displayed.
.headline span {display:none;}

3. Then a hover for the headline class.  These lines allow the text to be positioned relative to the outer div element and puts a background color in there to keep things readable.
.headline:hover {position:relative;}
.headline:hover span {display: block;position: absolute; top: 30px; left: 0; margin-left:10px; background-color:#F6EDE2; border-style:solid; border-width:1px; padding:3px; }

Here is an example of what this looks like...

---

---

 

Here is the code used in the above sample...

<style type="text/css">
<!--
.headline:hover {position:relative;}
.headline span {display: none;}
.headline:hover span {display: block;position: absolute; top: 30px; left: 0; margin-left:10px; background-color:#F6EDE2; border-style:solid; border-width:1px; padding:3px; }
-->
</style>
<div class=headline>
Headline 1
<span>Article 1 - Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
</span>
</div>
<div class=headline>
Headline 2
<span>Article 2 - Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
</span>
</div>
<div class=headline>
Headline 3
<span>Article 3 - Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
</span>
</div>
<div class=headline>
Headline 4
<span>Article 4 - Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
Details of the article that I don't want to junk things up with, but need to be handy to the user in a hover.
</span>
</div>