title: How to Style Specific Element On Hover With CSS?
body: <p>This question is for <a href="http://chameleonwebsolutions.com" rel="nofollow noreferrer">http://chameleonwebsolutions.com</a>. I need it so that when you hover over the social media links, their color changes to a darker green (#72984a). I tried:</p>
  
  <pre><code>.site-header .fa a:hover {
  color: #72984a !important;
  }
  
  .fa .fa-facebook-square a:hover {
  color:#72984a !important;
  }
  
  .social-icons a:hover {
  color:#72984a !important;
  }
  
  .logo .mobile-social-icons .hidden-tablet a:hover {
  color:#72984a !important;
  }
  
  .social-icons .hidden-mobile .responsive-header-gutter a:hover {
  color: #72984a !important;
  }
  </code></pre>
  
  <p>In the stylesheet but none of them are showing up in the inspector. I would try just a:hover in the stylesheet (no class before it) but then of course that would apply to all of the hyperlinks. How can I style only the social media links when you hover over them? Thanks!</p>
  
  <p><a href="https://i.imgur.com/xajGHxH.jpg" rel="nofollow noreferrer" title="Screenshot"><img src="https://i.imgur.com/xajGHxH.jpg" alt="Screenshot" title="Screenshot"></a></p>