jquery - css クラスの追加に関する jQuery/JavaScript の問題

Question

現在、スクリプトにクラスを追加する際に問題があります。私はユニークなhtml構造を持っています。だから私はあなたのアドバイスが必要です。あなたが私を助けてくれることを願っています。

以下は私のhtmlコードです

<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>

下を見てください。私の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;
}

そして、ここに私のjQueryコードがあります:

$(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");
    });
}); 

面白い視覚効果をやりたいです。onmouseover イベントの実行時に色を変更したいのですが、スクリプトが正しく動作しません。助けてくれませんか??

質問があるときは、私に手紙を書いてください。