I'm trying to create a small snipped that would allow for text to be masked unless a link was hovered over it. Something like this:

```
<span class="mask">My Information</span>
<a href="#">View Info</a>

```

When the page loads, the page is displayed as follows:

```
<span class="masked">••••••••••••••</span>
<a href="#">View Info</a>

```

Essentially the bullets would take up as much space as the text that its replacing. Then when a user clicks the "View Info" link, the mask would revert back to the information.

```
<span class="mask">My Information</span>
<a href="#">View Info</a>

```

There will be multiple instances of this on one page. 

Any ideas? I don't really know where to begin.. I was thinking about making a bunch of password fields but thought it would get messy..