title: Different text-colors in one div need to change to one color when hovering over div
body: <p>I want to display a line of text with two different colors (black and red). 
  When the user hovers over the div where the text is in, the div's background-color changes and ALL the text in the div has to become white.</p>
  
  <p>Using the 'span' element would be a good solution to show different colors on one line.
  However, the text in the 'span' element remains red while the other text does change to white when I hover over the div.</p>
  
  <p>So how do I make sure all the text changes to white?
  All help is appreciated.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.linkBackground
  {        
      background-color: White;
      border-bottom: 1px solid #a22a29;        
      color: Black;
  }
  
  .linkBackground span
  {
      color: #a22a29;
  }
  
  .linkBackground:hover
  {
      background-color: #a22a29;
      border-bottom: 1px solid White;
      color: White;
  }
  </code></pre>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div class="linkBackground"&gt;
      This is &lt;span&gt;an example&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>