title: link doesn't change color on mouseover with a:hover
body: <p>I'm building a website and got stuck with this weird problem. When I change the <code>color</code> and <code>text-decoration</code> using a css selector and <code>a:link</code> , <code>a:visited</code> the code works fine, but when I add <code>a:hover</code> nothing happens.</p>
  
  <p>Basically what I want is just to change the link color on mouseover, so people can easily see that this is a link they can click on.</p>
  
  <p>I'm using a google font, and template called normalize.css (both are linked to the snippet using CDNs). I'm also using a custom icons font called ionicons, and another stylesheet for creating the header/footer but I don't think they're relevant, since I recreated the problem in the snippet below without linking to them.</p>
  
  <p>I'm sure I'm missing something obvious but can't quite figure it out. Snippet below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/************************************************
  LAYOUT
  ************************************************/
  
  
  
  
  /************************************************
  SEARCHBOX
  ************************************************/
  #articles-sidebar {
   margin: 0.5em 0;
   padding: 1em;
  }
  #articles-sidebar h2, #articles-sidebar p {
   margin: 0;
   padding: 0;
  }
  #articles-sidebar input {
   box-sizing: border-box;
   padding: 0.5em;
   margin: 0.5em 0;
  }
  #articles-sidebar input[type="submit"] {
   border: none;
   color: #fff;
   background-color: #26A65B;
  }
  
  /************************************************
  ARTICLES
  ************************************************/
  .article-box {
   padding: 0.5em;
   margin-bottom: 0.5em;
  }
  .free {
   background-color: #e3f9ec;
  }
  .members {
   background-color: #e1b8dd;
  }
  .article-categories {
   list-style: none;
   margin: 0;
   padding: 0;
  }
  .article-category {
   padding: 0.5em;
   margin-right: 0.5em;
   display:inline-block;
   background-color: #fff;
   border-radius: 50px;
  }
  .article-box h1 {
   margin: 0.5em 0;
   padding: 0;
  }
  .article-box a:link, .article-box a:visited {
   text-decoration: none;
   color: #26A65B;
  };
  /* THIS ONE DOESN'T WORK */
  .article-box a:hover {
   color: #913D88;
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
            &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
        &lt;title&gt; Articles | PTC Testers
  &lt;/title&gt;
  
        &lt;meta name="description" content="Pay to click sites testing"&gt;
        &lt;meta name="author" content="Shooshte"&gt;
  
        &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'&gt;
        
        &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/ionicons.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/articles.css"&gt;
        
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;header&gt;
          &lt;h1&gt;PTCTesters&lt;small&gt;.com&lt;/small&gt;&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="http://topdeckandwreck.com/PTC_php"&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://topdeckandwreck.com/PTC_php/articles"&gt;articles&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://topdeckandwreck.com/PTC_php/sites"&gt;sites&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://topdeckandwreck.com/PTC_php/contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://topdeckandwreck.com/PTC_php/login"&gt;login&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/header&gt;
  
      &lt;div id="content"&gt;
         &lt;div id="articles-sidebar"&gt;
    &lt;h2&gt;Search articles archive:&lt;/h2&gt;
    &lt;form&gt;
     &lt;input type="text" placeholder="author, title, keyword..."&gt;
     &lt;input type="submit" value="Search"&gt;
    &lt;/form&gt;
   &lt;/div&gt;
   &lt;div id="articles-feed"&gt;
    &lt;div class="article-box free"&gt;
     &lt;h1&gt;&lt;a href="#"&gt;Article title&lt;/a&gt;&lt;/h1&gt;
     &lt;ul class="article-categories"&gt;
      &lt;li class="article-category"&gt;&lt;a href="#"&gt;milestone&lt;/a&gt;&lt;/li&gt;
      &lt;li class="article-category"&gt;&lt;a href="#"&gt;strategy guide&lt;/a&gt;&lt;/li&gt;
      &lt;li class="article-category"&gt;&lt;a href="#"&gt;free&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;h3&gt;&lt;a href="#"&gt;Article Author&lt;/a&gt;&amp;nbsp;| Date posted&lt;/h3&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis congue malesuada. Cras in lacinia urna, ut malesuada ex. Ut tempor dignissim ex, vel congue mi tristique vel. Duis non nisi congue, malesuada enim et, ornare nunc. Donec auctor mattis neque, eget hendrerit ante euismod at. Donec quis sem facilisis, pretium dui at, mattis est. Cras tristique ultrices ipsum, id ornare diam egestas quis. Aliquam pulvinar turpis sit amet lacinia laoreet. In scelerisque vitae neque et pulvinar. Donec auctor turpis erat, ut tincidunt risus aliquam non. &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="article-box members"&gt;
     &lt;h1&gt;&lt;a href="#"&gt;Article title&lt;/a&gt;&lt;/h1&gt;
     &lt;ul class="article-categories"&gt;
      &lt;li class="article-category"&gt;&lt;a href="#"&gt;milestone&lt;/a&gt;&lt;/li&gt;
      &lt;li class="article-category"&gt;&lt;a href="#"&gt;strategy guide&lt;/a&gt;&lt;/li&gt;
      &lt;li class="article-category"&gt;&lt;a href="#"&gt;free&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;h3&gt;&lt;a href="#"&gt;Article Author&lt;/a&gt;&amp;nbsp;| Date posted&lt;/h3&gt;
     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis congue malesuada. Cras in lacinia urna, ut malesuada ex. Ut tempor dignissim ex, vel congue mi tristique vel. Duis non nisi congue, malesuada enim et, ornare nunc. Donec auctor mattis neque, eget hendrerit ante euismod at. Donec quis sem facilisis, pretium dui at, mattis est. Cras tristique ultrices ipsum, id ornare diam egestas quis. Aliquam pulvinar turpis sit amet lacinia laoreet. In scelerisque vitae neque et pulvinar. Donec auctor turpis erat, ut tincidunt risus aliquam non. &lt;/p&gt;
    &lt;/div&gt;  
   &lt;/div&gt;
      &lt;/div&gt;
        
      &lt;script src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  
      &lt;footer&gt;
        &amp;copy;&amp;nbsp;PTC-Testers,&amp;nbsp;2015
      &lt;/footer&gt; 
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>