1

我有一些数据视觉效果的 3 x 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;
}
4

0 回答 0