title: How to underline button text (using CSS) when mouse pointer is over the button?
body: <p>I've made a button but being me it isn't good enough and I want it to change it's properties when the mouse pointer hovers over it. I've tried:</p>
  
  <pre><code>a:hover #button {
  text-decoration:underline;
  }
  </code></pre>
  
  <p>as well as:</p>
  
  <pre><code>a:hover input {
  text-decoration:underline;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Sign-In&lt;/title&gt;
   &lt;link rel='stylesheet' type='text/css' href='stylesheet.css'/&gt;
   &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="body-color"&gt;
  &lt;h1 id="heading"&gt;Welcome to the Intarnet.&lt;/h1&gt;
  &lt;hr style="color:#E6B636"&gt;
  &lt;div id="Sign-In"&gt;
  &lt;center&gt;&lt;legend&gt;Please enter your username and password.&lt;/legend&gt;&lt;/center&gt;
  &lt;hr style="color:#E6B636"&gt;
  &lt;form method="POST" action="connectivity.php"&gt;
  Username: &lt;br&gt;&lt;input type="text" name="user" size="40"&gt;&lt;br&gt;
  Password: &lt;br&gt;&lt;input type="password" name="pass" size="40"&gt;&lt;br&gt;&lt;br&gt;
  &lt;input id="button" type="submit" name="submit" value="Log-In"&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>-Trey</p>