1

私はこれを機能させようとしていますが、jQueryについてはほとんど知りません。

ユーザーがdiv「ボタン」にカーソルを合わせると、div「スライド」の背景位置が「00」から「0-89px」に変更され、マウスを別のポイントに移動すると、背景位置が「00」にリセットされる必要があります。 。

これがコードです（stackoverflowに関する別の質問からリサイクルされています）：

    $(document).ready(function(){
    $('#button').hover(function(){
        $('#slide').css('backgroundPosition', newValue);
    }, function(){
        $('#slide').css('backgroundPosition', '0 -89px');
    });
});

私のHTML：

<div id="container">
        <div id="slide"></div>
        <div id="button">Click me!</div>
</div>

私のCSS：

div#slide {
  background: url(base_slide.png) no-repeat;
  width: 629px;
  height: 89px;
  background-position: 0px 0px;
}

動作しますが、期待どおりではありません。ボタンdivにカーソルを合わせると何も起こりませんが、マウスを別のポイントに移動すると、すべてのコードが機能し、背景が変わります。

これを修正する可能性があると確信していますが、昨日、jQueryの調査を開始しました。また、背景位置を00にリセットする方法もわかりません。

私を手伝ってくれますか？

4

2 に答える 2

1

varnewValueは「00」に置き換える必要があると思います。私があなたのニーズを正しく理解していれば。

この例を確認してください：http：//jsfiddle.net/VBEaQ/1/

更新：これはfadeInフェードアウト効果の完全な例です;-)

$(document).ready(function(){
    $('#button').hover(function(){
        $('#slide').stop().fadeOut(function(){
            $(this).css('backgroundPosition', '0 -89px');
        }).fadeIn();
    }, function(){
        $('#slide').stop().fadeOut(function(){
            $(this).css('backgroundPosition', '0 0');
        }).fadeIn();
    });
});​

ライブデモ： http： //jsfiddle.net/VBEaQ/9/

于 2012-04-15T12:19:12.237 に答える
-1

使用する1関数=1cssメソッドではなく、複数のcss属性と値を定義するようにしてください。jqueryのドキュメントが役立つはずです。backgroundPositionではなくbackground-positionも役立ちます。

于 2012-04-15T12:37:26.770 に答える