JQuery replaceWith / toggle

Question

我有一个3乘3网格的一些数据视觉效果。每当用户将鼠标悬停在网格中的图块上时，我希望更改内容以使用某些文本呈现纯色背景颜色，然后当用户将图块悬停时，我希望它恢复到图表。我已经尝试了几种不同的方法来做到这一点，包括.effect但是在隐藏/显示内容等时通常会出现问题。我正在使用下面的replaceWith函数获得所需的替换效果，但即使我尝试第二个函数正在做另一个替换我无法让它恢复到我的规格。有关如何修改我的函数或不同的JQuery函数的任何建议吗？

   $('#fooChartButton').hover(function () {
        $('#fooChartButton').fadeOut('slow', function () {
            $('#fooChartButton').replaceWith('<a href="#" id="fooReplaceChartButton"><div class="large-3 large-offset-1 columns replaceGaugeArea"><div>foo<br />Chart</div></div></a>');
            $('#fooReplaceChartButton').show().fadeIn('fast');
        });
});

行HTML：

<div class="row">
    <a href="#" id="foo1ChartButton">
        <div class="large-3 large-offset-1 columns modalGaugeArea">
            <span class=foo1Title">foo1</span>
            <div id="foo1Gauge" class="gaugeContainer"></div>
            <span class="foo1Dialogue">foo1</span>
        </div>
    </a>
    <a href="#" id="foo2ChartButton">
        <div class="large-3 large-offset-1 columns modalGaugeArea">
            <span class="foo2Title">foo2</span>
            <div id="foo2tGauge" class="gaugeContainer"></div>
            <span class="foo2Dialogue">foo2</span>
        </div>
    </a>
    <a href="#" id="foo3ChartButton">
        <div class="large-3 large-offset-1 columns modalGaugeArea">
            <span class="foo3Title">foo3</span>
            <div id="foo3Gauge" class="gaugeContainer"></div>
            <span class="foo3Dialogue">foo3 Activity</span>
        </div>
    </a>
</div>

每个瓷砖CSS：

.modalGaugeArea {
    color: #000000;
    font-weight: bold;
    text-align: center;
    background-color: #ffffff;
    opacity: 1;
    -webkit-box-shadow: 0px 3px 5px #808080;
    box-shadow: 0px 3px 5px #808080;
    margin-top:5px;
    margin-bottom: 5px;
}