0

画像をロールオーバーすると、画像の下にボックスが表示されて下に展開するjavascriptコードを見つけようとしています（劇場の映画のスクリーンが天井から床に転がるのと同じように）。そのボックスには、前に追加した、上の画像を説明するコンテンツも表示されます。画像の下にすでに存在しているので、コンテンツを含むdivがあります...上記のボックスが下に拡大するときに、このdivを押し下げたいと思います。

助言がありますか？

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

C *

使用しているコードを忘れてしまいました...ここで起こっているのは、写真があり、その下に小さなボックスがあり、その小さなボックスをロールオーバーすると色が変わるということです。そこで、その小さなボックスをスクロールすると、色が変わるだけでなく、その下に新しい垂直方向の拡張ボックスが表示されることを追加したいと思います。既存のロールオーバー効果を処理するjavascriptが*.jsファイルにありますが、それは非常に長く、追加する必要があるかどうかわかりませんでした（ロールオーバーイメージを作成したときにDreamweaverによって作成されました）。

<div class="images">

<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>

<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>

</div>
4

2 に答える 2

1

展開するdivがマークアップの画像の直後にある限り、このようなことを行う必要があります。

$(".class_for_images").on("mouseenter mouseleave", function() {
    var content = $(this).next();

    if (content.is(":visible")) {
        content.slideUp();
    } else {
        content.slideDown();
    }
});

これ以上必要な場合、または機能しない場合は、より詳細な回答を提供できるように、コードを投稿する必要があります...

于 2012-12-20T10:14:45.183 に答える
1

現在の設定についての質問ではあまり情報を提供しませんが、HTMLが次のように設定されていると仮定します。

<div>
    <img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
    <div id="tux_desc" class="imgDesc" style="display: none">
        <p>A cute penguin!</p>
    </div>
</div>
<div>
    <p>This text is part of the normal document flow</p>
</div>

次に、次のJavaScript（jQueryを使用）を使用できます。

$('#tux').hover(
    function() {
        $('#tux_desc').slideDown();
    },
    function() {
        $('#tux_desc').slideUp();
    });

あなたはそれがここで働いているのを見ることができます：http：//jsfiddle.net/wbAxm/1

于 2012-12-20T10:15:48.547 に答える