3

メインのdivの背景である画像スプライトがあり、その中には12個のリンクがあります。リンクがホバーされたときに各リンクのCSSファイルにbackground-positionの値を書き込む代わりに、jQueryでそれを実行して、background-position yが550px増加するようにします（x位置は同じままです）。

マークアップ：

<div class="compass">
    <a class="facebook" href="#">&nbsp;</a>
    <a class="twitter" href="#">&nbsp;</a>
    <a class="youtube" href="#">&nbsp;</a>
</div>

CSS：

.compass {
    background-image: url('../images/compass.png');
    background-position: top;
    height: 550px;
    position: relative;
    width: 567px;
    margin: 0 auto;
}
.compass a{
    background-image: url('../images/compass.png');
    background-position: top;
    display: block;
    position: absolute;
}
a.facebook {
    height: 51px;
    width: 26px;
    left: 151px;
    top: 190px;
}

したがって、アイデアは、背景画像のx位置とy位置を示す各リンクのCSSルールスタイルを作成することです。次に、ホバーすると、y位置が550px増加します。マウスアウトすると、元のホットに戻ります（550pxの減少）。

jQuery構文を開始しましたが、理解できません。

var originalPosition = obj.css('background-position');
$(".compass a").hover(
    function(){
        $(this).css('backgroundPosition', originalPosition + 550 + "px")
    },
    function(){
        $(this).css('backgroundPosition', "");
    }
)

どうもありがとうございました！

4

4 に答える 4

5

FFでも動作するように編集されました。

$(".compass a").hover(function() {
    var bgpos = $(this).css('backgroundPosition').split(' ');
    $(this).css('backgroundPosition', bgpos[0] + ' ' + (parseInt(bgpos[1],10)+550) + 'px');
}, function() {
    var bgpos = $(this).css('backgroundPosition').split(' ');
    $(this).css('backgroundPosition', bgpos[0] + ' ' + (parseInt(bgpos[1],10)-550) + 'px');
});

フィドル

FFハックに対するこの回答のクレジット。

于 2012-08-20T15:14:11.933 に答える
1

ホバーと標準の背景位置を別々のCSSルールとして作成し、とを使用する方がよいでしょaddClassうremoveClass。

$(".compass a").hover(
    function(){
        $(this).addClass('hoverIn');
    },
    function(){
        $(this).removeClass('hoverIn');
    }
);

css：

.compass a.hoverIn {
    background-position: 550px;
}
于 2012-08-20T15:05:26.943 に答える
1

あなたのために作りたてのこれをチェックしてください。仕事をします。 http://jsfiddle.net/Anr24/

あるいは、CSSで：hover属性を定義するだけの方がいいのではないでしょうか。

幸運を！

于 2012-08-20T15:15:00.903 に答える
0

背景位置の値に任意の量を追加する場合は、+ =Xおよび-=Xを使用してみてください。ここで、Xは追加/削除する値です。

私はより細かい詳細が間違っているかもしれませんが、このようなものです：

$(".compass a").hover(
    function(){
    $(this).css('backgroundPosition', '+=50px')
},
function(){
    $(this).css('backgroundPosition', '-=50px');
}
)

...トリックを行う必要があります

これが私が何を意味するかをあなたに示すための簡単なフィドルです：

http://jsfiddle.net/erinfreeman/Jj46m/

于 2012-08-20T15:20:35.640 に答える