0

親 div の背景を子 div のリンクでスワップする次の js コードを見つけましたが、マウスアウト時にホバー状態が元の状態に戻るのではなく、そのまま残ります。リンクからマウスを離した後、親divの背景を返すようにコードを調整するのを手伝ってくれる人はいますか? 前もって感謝します。

    $('.background-changer').on('mouseover', 'a', function () {

    var background = "url('" + $(this).attr('data-background') + "')";

    $('.background-changer').css('background-image', background)
});

}); 


    <div id="navBar" style="background: url(images/navigation-background-0.gif);" class="background-changer">
                <div id="navBarCell1"><a href="#" title="Resort" target="_parent" data-background="images/navigation-background-1.gif">Resort</a></div>
</div>

#navBar {
    height: 38px;
    width: 760px;
    float: right;
    background-repeat: no-repeat;
}
#navBarCell1 {
    float: left;
    width: 75px;
    text-align: center;
    height: 26px;
    overflow: hidden;
    margin: 0px;
    padding-top: 9px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#navBarCell1 a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-transform: lowercase;
    color: #000;
    text-align: center;
    text-decoration: none;
    padding: 20px;
    margin-top: 10px;
}
4

2 に答える 2

0

持っているものを保持できますが、背景をリンクの URL に設定する前に、現在の背景 URL を使用して親 div にデータ属性を追加します。次に、mouseout イベントにバインドし、次のように戻します。

var bgChanger = $('.background-changer');
bgChanger.on('mouseenter', 'a', function () {
var background = "url('" + $(this).attr('data-background') + "')";

bgChanger.data('original-background', bgChanger.css('background-image')).css('background-image', background);
}

bgChanger.on('mouseout', function(){
  bgChanger.css('background-image', bgChanger.data('originalBackground'));
});

私はこれをテストしていませんが、動作するはずです。

于 2013-09-11T20:29:14.503 に答える