title: Changing text color on hover
body: <p>I am attempting to add a text color change on my <code>a</code> tag. Inside of my <code>a</code> tag I have two separate span classes. One to keep the text black and the other to have the text gray. On hover, I would like both these span text color to turn blue.</p>
  <p>At the moment, when hovering over my <code>a</code> tag only the first span text turns blue, but not the span tag the has css to have text gray.</p>
  <p>How can I make it so on over of the <code>a</code> tag both span colors turn blue.</p>
  <p>Here is an example of my code:</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>.gray-text {
    color: gray;
  }
  .gray-text:hover {
    color: blue;
  }
  
  
  
  a:hover {
    text-decoration: underline;
    color: blue!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;a&gt;&lt;span&gt;Click Here&lt;/span&gt; &lt;span class="gray-text"&gt; (Sub-Title)&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've attempted to work around with by applying a <code>:hover</code> to my class <code>gray-text</code> which gives me the look I am going for but only when hovering over the gray text.</p>
  <p>My expected to outcome is on hover of <code>Click Here (Sub Title)</code> the entire text turns blue.</p>