1

jQuery ベースのカルーセルを作成する必要があります。カルーセル アイテムにカーソルを合わせると、そのすぐ上に関連するポップアップ div が表示されます。

このポップアップ div は、カルーセル ラッパーの外側に表示されるように配置する必要がありますが、ホバーされたカルーセル アイテムの上の x 軸に沿った位置を維持します。その結果、ポップアップ div をカルーセル アイテム内に配置したので、CSS のトップ属性をマイナスにして絶対に配置できますが、カルーセル アイテムに対して相対的です。

ページの読み込み時にすべてのカルーセル アイテムが表示されないように、オーバーフロー:hidden をカルーセルに適用する必要があるという問題に遭遇しましたが、ホバー時に表示する必要があるときにポップアップ div が切り取られます。

カルーセル ラッパーの CSS で次を使用してみましたが、これは機能しませんでした。オーバーフローのように動作するだけでした。

overflow-x: hidden;
overflow-y: auto;

また

overflow-x: hidden;
overflow-y: visible;

caroufredsel プラグインを使用した JSFiddle の例を提供しました。この例では、わかりやすいように、ホバーするのではなく、ポップアップ div の例を常に表示するようにしています。テキストが表示され、赤い div の上部が切り取られます。

http://jsfiddle.net/melon/jRp2r/9/

頭に浮かんだ 1 つの解決策は、ポップアップ div をカルーセル ラッパーの外側にマークアップすることでした。しかし、ホバリングされているカルーセル アイテムとどのアイテムがホバリングされていたかを基準にして、どこに配置/表示するかを理解する際に問題が発生します。この道をたどる前に、他のアイデア、おそらくもっと良いアイデアがあるかどうかを確認したかった.

誰かが私が概説した目標を達成するための方向性を私に与えることができれば、CSS またはおそらくいくつかのカスタム JS を介して素晴らしいでしょう.

ありがとうございます。

アップデート：

受け入れられた解決策は、カルーセルがページの中央にある場合、ページをスクロールするときにポップアップ div が Y 軸に沿って同じ位置にとどまらないことを意味していました。

私は最初の解決策を受け入れられた答えと融合させました。カルーセルの外側に別の div を作成し、そこにホバーしたカルーセル アイテムのポップアップ HTML を入力しました。次に、Jquery を使用してこれを完全に再配置します。次のコード例は、私の問題を解決しました。

$('.carousel_item').mouseenter(function() {
   var $this = $(this);
   var posLeft = ($this.offset().left);
   var posTop = ($this.offset().top);

   //Pop up height
   var popHeight = ($('.popup', this).height());

   //Turn into negative number
   posTop = Math.abs(popHeight) * -1;;

   var popup_html = $('.popup', $this).html();

   $('#outside_popup').html(popup_html).css({
       top: posTop,
       left: posLeft
   }).fadeIn('fast');

}).mouseleave(function() {
     $('#outside_popup').fadeOut('fast');
});
4

1 に答える 1

1

私はかつて自分で似たようなことをしなければなりませんでした。ここで誰かがより良い解決策を思いつくと確信していますが、これが私が行った方法です：

ポップアップをスライドにネストします。

<div class="slide">
    <div class="slide_content"></div>
    <div class="popup">Hello!</div>            
</div>

マウス オーバーで、スライドの位置を取得します。ホバーしたスライドに対するポップアップの位置を設定します。position: fixed;ここで重要です。次に、それを表示します。

$('.slide').mouseenter(function() {
    var $this = $(this);
    var posLeft = ($this.offset().left)-10
    var posTop = ($this.offset().top)-10
    $('.popup', $this).css({
                            position: 'fixed',
                            top: posTop,
                            left: posLeft
                           }).fadeIn('fast');

    }).mouseleave(function() {
        $('.popup', this).fadeOut('fast');
    });

非常に基本的な例については、ここをクリックしてください IE7-9、Firefox、Chrome でテスト済み

編集:これはあなたのコードの実例です

于 2012-11-07T13:37:21.873 に答える