title: On hover of li make anchor different color?
body: <p>I looked for a solution to my problem here by making my anchor tag's width 100% but nothing seemed to work.</p>
  
  <p>The desired effect is to have the entire li be an anchor tag so that on hover of the li the anchor's color changes, and the entire li is clickable</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.totem-container {
    background-color: #ffffff;
    width: 200px;
    color: #222222;
    padding-top: 200px;
  }
  
  .totem-list {
    width: 200px;
  }
  
  .totem-list li {
    width: 200px;
    height: 35px;
    list-style: none;
    transition: all .1s ease-in-out;
    -webkit-box-shadow: 0 4px 10px -6px #222;
    -moz-box-shadow: 0 4px 10px -6px #222;
    box-shadow: 0 4px 10px -6px #222;
  }
  
  .totem-list li:hover {
    transform: scale(1.1);
  }
  
  .totem-list a {
    color: #222222;
    list-style: none;
    text-decoration: none;
    font-size: 16px;
    line-height: 35px;
    width: 100%;
    height: 100%;
  }
  
  .totem-list a:hover {
    color: #78A025; !important
  }
  
  .totem-list i {
    font-size: 25px;
    margin-top: 5px;
    width: 35px;
    margin-left: 5px;
    color: #4f4f4f;
  }
   
  .totem-list i.social {
    font-size: 35px;
    text-align: center;
    margin: 1px;
    color: #007DC3;
    transition: all .1s ease-in-out;
  }
  
  .totem-list i.social:hover {
    transform: scale(1.1);
    color: #78A025;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="totem-container center-block pull-right"&gt;
      &lt;ul class="totem-list"&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-facebook-square social"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-twitter-square social"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-google-plus-square social"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-youtube-square social"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;li&gt;
          &lt;i class="fa fa-user"&gt;&lt;/i&gt;
          &lt;a href="#"&gt;Sign Up&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;i class="fa fa-phone"&gt;&lt;/i&gt;
          &lt;a href="#"&gt;Contact Sales&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;i class="fa fa-sign-in"&gt;&lt;/i&gt;
          &lt;a href="#"&gt;Log In&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/body</code></pre>
  </div>
  </div>
  </p>
  
  <p>What do I need to change in order to achieve this?</p>