1

私はウェブデザインに少し慣れていませんが、自分が何をしているのかほとんど知っているように感じます. いくつかの div があり、すべてのクラス.pictureが div 内のテキストでグループ化されています.description。私は jQuery を使用しているので、ユーザーが.picturediv 内の画像の 1 つにマウスを合わせると、その特定の画像に割り当てられたテキストがフェードインします。各 div に id を与えて、jQuery で個別にアクセスできることはわかっていますが、ループなど、1 回だけ呼び出し.mouseenter()てすべての div をアニメーション化できるようなことはできますか? .mouseleave()img と p の各ペアを別の div にグループ化する必要がありますか?

HTML:

<div class="picture" id="pic1"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/><!--Insert pictures of board members. Specify only height of width! -->
<div class="picture" id="pic2"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/>
<div class="picture" id="pic3"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/>
4

3 に答える 3

2

あなたはこれを行うことができます：

$("div.picture").mouseenter(function() {
    $(this).next().fadeIn();
}).mouseleave(function() {
    $(this).next().fadeOut();
});

これにより、マウスのエンターおよびマウスのリーブ イベント ハンドラーがすべての"div.picture"項目にバインドされます。イベントハンドラー内でthis、マウスが移動した個々のアイテムを参照し、その後.next()の要素を取得します-あなたの場合は説明divです。

デモ: http://jsfiddle.net/j83Dd/

または、隣接する兄弟セレクターと一緒に:hover擬似クラスを使用することにより、JavaScript を使用せずに CSS のみでこれを行うことができます。+

div.description {
    display : none;
}
div.picture:hover + div.description {
    display : block;
}

デモ: http://jsfiddle.net/j83Dd/1/

おっと、CSS ソリューションのフェードを忘れていました:

div.description {
    opacity : 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
div.picture:hover + div.description {
    opacity : 1;
}

デモ: http://jsfiddle.net/j83Dd/2/

上記のすべては、既存の html 構造に依存します。

「img と p の各ペアを別の div にグループ化する必要がありますか?」

おそらく、img と p を 1 つの div にグループ化して、両方を独自の div に配置したり、コンテナ div をロットの周りに追加したりするのではなく、グループ化できるように思えます。私の意見では、それらを div でグループ化することは理にかなっています。これにより、それらが一緒に属していることが明確になるためですが、そうする必要はありません...

于 2013-06-29T23:30:27.783 に答える
0

HTML の構造により、この状況を処理する汎用 .mouseenter() 関数を作成できます。関連する.descriptiondiv は常に .picture div の直後にあるため、 で関連する説明にアクセスできます$(this).next("div.description p");。.text() メソッドでテキストを読むか、アニメーションを使用して div.description を表示できます。

.mouseleave() 関数も同様で、関連するテキストを隠します。:visibleまたは、セレクターを使用してすべての説明テキストを非表示にすることもできます。正確な方がいい場合もあれば、単純な方がいい場合もあります。あなたのデザインに合うものを見てください。

于 2013-06-29T23:31:08.570 に答える
0

JavaScript を html 構造に依存させたくない場合は、html を次のように変更できます。

<div class="picture" id="pic1"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic1"><p>Gus</p></div><br/><!--Insert pictures of board members. Specify only height of width! -->
<div class="picture" id="pic2"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic2"><p>Gus</p></div><br/>
<div class="picture" id="pic3"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic3"><p>Gus</p></div><br/>

.descriptiondivに新しい属性を追加しました。これには、対応するdata-pic-idと同じ値が含まれます。id.picture

これにより、html 構造から分離される JavaScript を準備できます。

$('.picture').mouseenter( function() {
    var id = $(this).attr('id');
    $('[data-pic-id="'+id+'"]').fadeIn();
});
于 2013-06-29T23:36:05.963 に答える