jquery - 画像にカーソルを合わせると、隣接する画像に重ねて説明を表示する方法は?

Question

誰かが私を助けてくれるか、正しい方向に向けてくれることを願っています。

ここで行われたのと同じように、ユーザーが画像にカーソルを合わせて詳細情報を取得できる画像のグリッドを表示したいと思います。

これは簡単なことですか？純粋な CSS でそれを行うことはできますか、それとも jQuery を使用する必要がありますか? 可能であれば、正しい方向へのポインターが必要ですか?

score 2 · Accepted Answer

あなたが与えたリンクは、最初に背景画像のホバー状態を与え、次にtimeOutを介してツールチップを表示するようです。私はこれを明確にするためにフィドルに取り組んでいます。

だから、ここに行きます。これがフィドルです！

最も重要なことは、CSSに記載されている画像の遅延とホバー状態を含むjQueryです。したがって、ユーザーが画像をホバーすると、最初に取得するのは別の画像です。これは、単純なCSSホバーとCSSスプライトによって行われます。

.item {
    background-color: white;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top; 
}

.item:hover {
    background-repeat: no-repeat;
    background-position: center bottom; 
}

#flower {
    background-image: url('http://bramvanroy.be/files/images/tooltipOverlay.jpg');
}

画像を最初にホバーすると、jQuery関数がトリガーされますが、遅延します。

var tooltip = $(".item-tooltip");

tooltip.hide();

$(".item-wrapper").hover(
function() {
    $(this).children(tooltip).delay(550).fadeIn("slow");
    $(this).children(".item").fadeOut("slow");
},
...

そして、マウスがツールチップを離れると、マウスは非表示になり、.item再び表示されます。

...  
    function(){
        $(this).children(tooltip).fadeOut("fast");
        $(this).children(".item").fadeIn("fast");
    }
);

改善された回答：

これがショーケースです。これがそのショーケースのフィドルで、これが画像が（必要に応じて）変更されないフィドルです。

jQueryプラグインhoverIntentを使用して、1ミリ秒でもホバーされるすべての画像にツールチップが表示されるわけではないことを確認しました。それが行うことは、画像にカーソルを合わせてから（特定のタイムアウト後）関数を実行することがユーザーの意図であるかどうかを確認することです。このプラグインの詳細については、こちらをご覧ください。jQueryの標準のhover（）を使用できますが、お勧めしません。

z-indexも変更する必要があります。そうしないと、画像がツールチップの下に表示されるか、他のアイテムの画像が目的の画像のツールチップと重なってしまいます。

他にご不明な点がございましたら、コメント欄にご記入ください。

score 1 · Accepted Answer

私は彼らがそのウェブサイトで何をしているかを見てきましたが、私には設計されすぎているように見えます.

私がすることは、私たちが追加することです

<div class="comtainer">
    <div id="g11" class="square large" data-show-tooltip-in="#g12, #g12">
        <div class="normal-view"><img ... ></div>
        <div class="large-view"><img ... ></div>
        <div class="tooltip">blah blah</div>
    </div>
    <div id="g12" class="square small" data-show-tooltip-in="#g13">
       ...
    </div>
    ...
</div>

CSS

div.large-view { display : none; }
div.tooltip    { display : none; }

そして、JavaScriptは次のようなことを行います（速度のためのJQuery）：

$( '.square' ).on( 'mouseover', function*(e){
     //hides the normal image
     $( this ).find( '.normal-view' ).hide();
     //shows the zoomed image
     $( this ).find( '.large-view' ).show();
     //stores a reference to the square where the HTML tolltip will be shown
     var $tooltip = $( $( this ).attr( 'data-show-tooltip-in' ) );
     //hides the original content of the tooltip square
     $tooltip.find( 'div' ).hide();
     //clones the tooltip to the other square and shows it
     $( this ).find( '.tooltip' ).clone().qppendTo( $tooltip ).show();
})

これは単なる出発点ですが、それが私がそれを行う方法です。

EDIT追加説明

HTML には、square クラスの一連の div があります (それらは ul リストの li である可能性もありますが、今は重要ではありません)。各正方形には、必要なすべてのデータ (通常の画像、拡大された画像、およびツールヒント HTML) が含まれています。最後の 2 つは CSS に隠されています。各正方形には、ツールチップが表示されるセレクターを持つ data- 属性 (data-show-tooltip-in) もあります。

その後、JS make が残りを行います - コメントが役立つはずです。

score 1 · Accepted Answer

私がすることは、jqueryを使用することです。表示される div を作成し、ホバーしたときに必要な情報を表示する非表示の div を作成します。次に、jquery を使用して、css を使用してその div を非表示/表示します。

$(".info-class").hover(function(){
    $(this).css('display', 'none');
    $(".other-clas").css('display', 'block');
});

上記に似たもの

jquery - 画像にカーソルを合わせると、隣接する画像に重ねて説明を表示する方法は?

3 に答える 3

Related

Reference