Hi All,

I am starting to create a new site that will use a lot of CSS. I have a design created for me that I need to follow. One specification is the 4 links on the home page. I have positioned the links using CSS. I have also positioned the underline image where they need to be and set the visibility to hidden.

Now when the user mouses over the link I would like the underline image to appear.

Here is the code for my Page:


<a href="AboutFACE.html"><div id="LinkOne">About FACE<font size="-1">&reg;</font></div></a>
<div id="LinkOneLine"><img src="images/LinkOneUnderline.png"></div>

<div id="DividerBarOne"><img src="images/HomeDivideBar.png"></div>

<a href="Resources.html"><div id="LinkTwo">Resources</div></a>
<div id="LinkTwoLine"><img src="images/LinkTwoUnderline.png"></div>

<div id="DividerBarTwo"><img src="images/HomeDivideBar.png"></div>

<a href="Training.html"><div id="LinkThree">Training</div></a>
<div id="LinkThreeLine"><img src="images/LinkThreeUnderline.png"></div>

<div id="DividerBarThree"><img src="images/HomeDivideBar.png"></div>

<a href="Actions.htlm"><div id="LinkFour">Action</div></a>
<div id="LinkFourLine"><img src="images/LinkFourUnderline.png"></div>

How do I use CSS to make LinkOneLine appear when the mouse rolls over LinkOne?