Different text-colors in one div need to change to one color when hovering over div

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.

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.

So how do I make sure all the text changes to white? All help is appreciated.

Here is my CSS:

.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;
}

This is my HTML:

<div class="linkBackground">
    This is <span>an example</span>
</div>

Try:

.linkBackground:hover,
.linkBackground:hover span {
    color: #fff;
}

suggest solution using jQuery $('.linkBackground').hover(function() { $(this).find('span').css('color', 'hexcode'); })

.linkBackground:hover {
    background-color: #a22a29;
    border-bottom: 1px solid White;
    color: white !important;
}