Check out our Angular Book Series.

How do I display hidden text in my table on rollover using CSS?

I was building out an app for a client and they had some wireframes that showed a list of users. The wireframes had a bunch of user data; but the client wanted some of the data hidden until the user rolled over the table row. How do I do that? CSS is the answer.

First, create a CSS class:


#tableWithHiddenData{

}

Now, create a style for hidden data:


#tableWithHiddenData .rollOverText{
display:none;
}

The display CSS element is used to control layout. By giving it the value of none; the information will, essentially, be hidden.

Next, we'll need some CSS to display the hidden text on hover:


#tableWithHiddenData tr:hover .rollOverText{
display:block;
}

These are the three CSS elements that are needed, now lets create the table. Since, for my use case, I was displaying user data, our table will contain two columns. One for a user's name and one for the username. The a will always be displayed and a username that is only displayed on rollover:


<table id="tableWithHiddenData">
<tr>
<th>Name</th>
<th>UserName</th>
</tr>
<tr>
<td>Jeffry Houser</td>
<td><div class="rollOverText">jhouser</div></td>
</tr>
<tr>
<td>Someone Else</td>
<td><div class="rollOverText">someUser41</div></td>
</tr>
<tr>
<td>A Third User</td>
<td><div class="rollOverText">LuckyThird</div></td>
</tr>
</table>

Try this out on Plunkr.

Sign up for DotComIt's Monthly Technical Newsletter

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.