0

壁にぶち当たり、締め切りが迫っています。だからここに行きます。

CSSを使用してホバーすると、8つの外側のdivのそれぞれに背景画像がある3x3グリッドがあります。

中央の div には、jQuery を少し使用したテキストがあり、対応する各 div がクリックされたときに表示されます。

私が起こる必要があるのは、画像が含まれている外側のdivがクリックされ、テキストが表示されたときに、理想的には既存の画像を使用して、別のものがクリックされるまで、そのdivの背景画像がホバー状態のままになることです。

ホバーの CSS は -

.br a {
display:block;
width:250px;
margin:0;
height:225px;
float:left;
background:url('wp-content/themes/bondwoodhouse/img/br.png');
background-position:0px 0px;}
.br a:hover {
background:url('wp-content/themes/bondwoodhouse/img/br.png');
background-position:250px 250px; }

そしてjQueryは -

$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("fadeIn").siblings().hide("fadeIn");
});
});

このように配置されたすべてのdivで-

<div class="br"><a href="#" onclick="return false;" name="div9"></a></div>

前述のように、8 つの個別のクラスがあり、br は右下のクラスです。

これはおそらくかなり簡単ですが、私は jQuery でかなり迷っています。画像を交換するだけの既存のjQueryに何かを貼り付けることができると思いますか? トグルか何か？

ページ全体がぎりぎりでまとめられていますが、これが最後のつまずきです。どんな助けでも大歓迎です。

4

2 に答える 2

0

jQueryの.hide()および.show()メソッドは、「fadeIn」または「fadeOut」をサポートしていません。次のように、「fast」、「slow」、または任意の数値をミリ秒 (ms) 整数 (つまり 400) として使用します。

$("#"+divname).show("slow").siblings().hide("slow");

フェードインまたはフェードアウト アニメーションをどうしても使用したい場合は、次.animate()のように代わりにメソッドを使用する必要があります。

$("#"+divname).show().animate({height:"toggle",opacity: "toggle"},duration:"slow"}).siblings().hide().animate({height:"toggle",opacity:"toggle"},{duration:"slow"});

詳しくはこちらをご覧ください。

于 2012-05-16T13:20:01.547 に答える
0

いくつかの .selected ルールを CSS に追加できます。これはホバー ルールのように動作します。

/* Highlight if hover and also if the .br is selected */
.br a:hover,
.br.selected a {
  background:url('wp-content/themes/bondwoodhouse/img/br.png');
  background-position:250px 250px;
}

そして、これをdivで選択して設定します：

var selectedTile = $();
$(".container > div > a").click(function() {
    // remove the selected class from the previously
    // selected element (does nothing for the first time)
    selectedTile.removeClass("selected");
    selectedTile = $(this).parent();
    selectedTile.addClass("selected");
});

コンテナ要素を仮定すると:

<div class="container">
<div class="br"><a href="javascript:;"></a></div>
<div class="tl"><a href="javascript:;"></a></div>
</div>​

スクリプトは次のようになります。

$(document).ready(function(){
    var selectedTile = $();
    $('a').click(function () {
        var divname= this.name;
        $("#"+divname).show("fadeIn").siblings().hide("fadeIn");

        // remove the selected class from the previously
        // selected element (does nothing for the first time)
        selectedTile.removeClass("selected");
        selectedTile = $(this).parent();
        selectedTile.addClass("selected");
    });
});

上記で説明したように CSS を変更すると、これが機能します。

フィドルはこちら

于 2012-05-16T13:29:40.100 に答える