jquery - CSSdivポジショニング支援

Question

各#boxのホバーイベントに表示されるdivの配置についてサポートが必要です。非表示のdivは、次のようにホバーされたボックスの上に表示されます。

1. 各#tooltipdivは、ホバーされたボックスとその隣のボックスをカバーします
2. ボックス1と2のツールチップは、右側のボックスをカバーする必要があります

3. ボックス3と4のツールチップは、左側のボックスをカバーする必要があります

   （わかりやすくするため、添付画像をご覧ください。
4. ボックスの行がいくつかあるので、位置は相対的であり、ページの寸法に固定されていない必要があります（私は推測します）

これまでのところ、＃tooltipの位置を正しく設定することはできませんでした（一方は絶対的で、もう一方は相対的である必要があることはわかっていますが、私の努力に関係なく、まだそれを釘付けにしていません）。

これが取り組むべきjsfiddleであり、これは私が求めている結果です：

Answer 1

これは、あなたが取得しようとしているものですか？

http://jsfiddle.net/xnrdp/1/

Answer 2

あなたが説明したことを達成すると思うフィドルをまとめました。

その背後にあるアイデアは、ボックスとそのツールチップの周りにラッパーを配置することです。次に、ボックスとそのツールチップではなく、ラッパーでマウス ホバー イベントをリッスンします。こうすることで、ツールチップが表示されたときのちらつきを回避し、最初にホバーされた要素をカバーします。

ラッパーの位置を相対的にすると、ツールチップを絶対的に相対的に配置できます。jQuery hover-callback に小さな if ステートメントを使用すると、ツールチップをボックスの左側または右側に配置する必要があるかどうかを判断できます。

何らかの理由でフィドルが消える場合は、回答のフィドルからのコードも添付します。

マークアップ:

<div class="container">
    <div class="boxwrapper">
       <div id="box1" class="box">Box 1</div>
       <div id="tooltip1" class="tooltip">Description 1</div>
    </div>
    <div class="boxwrapper">
       <div id="box2" class="box">Box 2</div>
       <div id="tooltip2" class="tooltip">Description 2</div>
    </div>
    <div class="boxwrapper">
       <div id="box3" class="box">Box 3</div>
       <div id="tooltip3" class="tooltip">Description 3</div>
    </div>

    <div class="boxwrapper">
       <div id="box4" class="box">Box 4</div>
       <div id="tooltip4" class="tooltip">Description 4</div>
    </div>
    <div class="clearfix"></div>
</div>​

CSS:

.container {
    width: 450px;
    height: auto;
}

.box {
    background: #CCC;
    padding: 20px;
    float: left;
    height: 60px;
    width: 60px;
    list-style-type: none;
    margin: 5px;
    z-index: 1;
}
.tooltip {
    background: rgba(153,153,153,0.7);
    padding: 20px;
    height: 60px;
    width: 170px;
    margin: 5px;
    display:none;
    position: absolute;
    z-index: 2;
}
.clearfix {
    clear: both;
    float: none;
    height: 1px;
}
.boxwrapper {
    position: relative;
    float: left;
}

jQuery:

$(document).ready(function() {

    $(".boxwrapper").mouseenter(function() {
        var tooltip = $(".tooltip", this);
        tooltip.show();
        if ($(".boxwrapper").index(this) < 2) {
            tooltip.css("left", 0);
        } else {
            tooltip.css("right", 0);
        }
    });

    $(".boxwrapper").mouseleave(function(event) {
        $(".tooltip", this).hide();
    });

});  ​

アップデート：

ボックスの複数の行で使用する場合は、それを考慮して if ステートメントを多少改善する必要があります。

Answer 3

「hover」セレクターと「nth-of-type」を使用して、CSS 自体でこれを行うことができます。

3 行目ごとに選択します。

:nth-of-type(3), :nth-of-type(7), :nth-of-type(13), :nth-of-type(15)

そして4行目：

:nth-of-type(4), :nth-of-type(8), :nth-of-type(12), :nth-of-type(16)

そして、そのフライアウト ボックスに必要なプロパティを与えます。

デモ: http://dabblet.com/gist/3765761

マークアップ:

<div class='box'>1
    <div class='fly-out'></div>
</div>

<div class='box'>2
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>3
    <div class='fly-out'></div>
</div>
<div class='box right-aligned'>4
    <div class='fly-out'></div>
</div>

<div class='box'>5
    <div class='fly-out'></div>
</div>

<div class='box'>6
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>7
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>8
    <div class='fly-out'></div>
</div>

<div class='box'>9
    <div class='fly-out'></div>
</div>

<div class='box'>10
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>11
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>12
    <div class='fly-out'></div>
</div>

<div class='box'>13
    <div class='fly-out'></div>
</div>

<div class='box'>14
    <div class='fly-out'></div>
</div>

<div class='box right-aligned'>15
    <div class='fly-out'></div>
</div>
<div class='box right-aligned'>16
    <div class='fly-out'></div>
</div>

CSS:

* {
margin: 0; 
padding: 0; 
box-sizing: border-box; /* paulirish.com/2012/box-sizing-border-box-ftw/ */
position: relative; 
}

body {
    width: 440px;
    margin: 0 auto;
    }

.box {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    float: left;
    margin: 5px;
    }
    .fly-out {
        position: absolute;
        top: 0;
        background: rgba(0,0,0,.4);
        opacity: 0;
        z-index: -1;
        }
    .box:hover .fly-out {
        z-index: 1;
        opacity: 1;
        height: 100%;
        width: 210px;
        }
    .box:nth-of-type(3):hover .fly-out,
    .box:nth-of-type(7):hover .fly-out,
    .box:nth-of-type(11):hover .fly-out,
    .box:nth-of-type(15):hover .fly-out,
    .box:nth-of-type(4):hover .fly-out,
    .box:nth-of-type(8):hover .fly-out,
    .box:nth-of-type(12):hover .fly-out,
    .box:nth-of-type(16):hover .fly-out,

    .right-aligned {
        left: -110px;
        right: 0;
        background: rgba(0,0,120,.7);
        }

あなたのマークアップでは、「ツールチップ」はボックスの外側にあり、「可視性：非表示」でした。これは、「不透明度：0」を与えるのとほとんど同じです。目には見えませんが、まだそこにあります。実際にレイアウトで使用できないようにするには、「display: none」が必要ですが、CSS トランジションを使用して適切にアニメーション化することはできません。

注:以下のコメントで言及されている Christofer Eliason のように、「:nth-of-type」セレクターはあまりサポートされていないため、フライアウトを右揃えにするか、調べたいすべての div にクラスを追加できます。 「nth-of-type」の jquery バージョンを使用: https://stackoverflow.com/a/4761510/604040。

「:nth-of-type」セレクターを使用したのは、新しいボックスが動的に追加された場合、新しいボックスにクラスを追加しなくても、CSS 自体からフライアウトの配置を制御できるためです。これは数学的に少し複雑になる可能性があります (少なくとも私のため）。

しかし、それでよろしければ、各行の 3 番目と 4 番目のボックスに「.right-aligned」クラスを追加しました。CSS でこのブロックを削除しても問題ありません。

.box:nth-of-type(3):hover .fly-out,
.box:nth-of-type(7):hover .fly-out,
.box:nth-of-type(11):hover .fly-out,
.box:nth-of-type(15):hover .fly-out,
.box:nth-of-type(4):hover .fly-out,
.box:nth-of-type(8):hover .fly-out,
.box:nth-of-type(12):hover .fly-out,
.box:nth-of-type(16):hover .fly-out