jQuery/ JavaScript Problems with adding css class

Nowadays i have problem with adding class in my script. I have unique html structure. So i need your advice. I hope that you help me.

The below there is my html code

<ul>
    <li> <a href="#" onmouseover=changeImage( 'CT')>
            <span class="CT"> CT&amp;M</span>
            <span class="CT">(blablabla)</span>
        </a>

    </li>
    <li> <span>/</span>

    </li>
    <li> <a href="#" onmouseover=changeImage( 'Invest')>
            <span class="Invest">Invest</span>
            <span class="Invest">(blablabla)</span>
        </a>

    </li>
</ul>

Look down. there is my css

aside ul li a span:first-child, aside ul li span:first-child {
    display: block;
    text-align: center;
    font-family: "Roboto-Medium";
    font-size: 1.8em;
    color: #060606;
}
aside ul li a span:last-child {
    display: block;
    text-align: center;
    font-family: "Roboto-Medium";
    font-size: 1.05em;
    color: #060606;
}
aside ul li a span.active
{
    color: #007582;
}
aside ul li a span.disactive
{
    color: #060606;
}

And here is my jQuery code:

$(function () {
    $(".CT").one("mouseover", function () {
        $("span.Invest").removeClass("active");
        $("span.CT").addClass("active");
    });

    $(".Invest").one("mouseover", function () {
        $("span.CT").removeClass("active");
        $("span.Invest").addClass("active");
    });
}); 

I would like doing interesting visual efect. I want to change color when I run onmouseover event but my script don't work properly. Could you ghelp me??

When you have any questions, you write to me.