title: hovering over a button and changing its properties html/js/css
body: <p>I'm trying to implement a button which draws a border around itself when a user's mouse is over it. I've written the following code in <code>index.html</code>:</p>
  <pre><code>                &lt;h1 id=&quot;logo&quot;&gt;
                      &lt;button onclick=&quot;location.href='http://www.github.com/xxxxx'&quot; 
                      onmouseover=&quot;outline(this)&quot; onmouseout=&quot;unoutline(this)&quot;
                      type=&quot;button&quot;&gt;GitHub&lt;/button&gt;
                  &lt;/h1&gt;
  
                  &lt;script&gt;
                      function outline(x){
                          x.style.border = none;
                      }
                      
                      function unoutline(x){
                          x.style.border = solid;
                      }
                  &lt;/script&gt;
  </code></pre>
  <p>The actual linking part of the button works as expected- upon clicking, the button redirects the user to the GitHub link. However, when the mouse hovers over the button, there is no change. This could be because (1) <code>outline</code> is not being called correctly when the mouse hovers over the button, or more likely (2) because I'm changing the properties incorrectly in the <code>outline</code> function. I'm assuming it's (2), since it doesn't seem like I'm able to access the css attributes of a button via <code>Element.style</code>.</p>
  <p>Could anyone shed some insight on why the border is not appearing when a user hovers over the button?</p>