2

imgwithinにカーソルを合わせるとdiv.hover-groupdivdiv.hover-toggleが表示され、マウスが画像から離れると表示されなくなります。は、それが属するdiv.hover-toggleの領域内に表示され、その下の境界線と同じ幅の各 に揃えられます。imgbutton.btn

説明する：

マウスオーバーなし:

|-----------|
|           |
|    img    |
|           |
|           |
|           |
|-----------|

マウスオーバーです:

|-----------|
|           |
|    img    |
|           |
|-----------|
| 1 | 2 | 3 |
|-----------|

私はすでに jQuery を使用してホバー トグルを達成しています。

$(selector1).mouseover(function(){$(selector2).hide();});
$(selector1).mouseout(function(){$(selector2).show();});

ただし、図のように画像の下部に合わせることができず、div.hover-toggle代わりに画像の下に表示されます。

これはどのように行うことができますか？

ありがとう！

上で操作している DOM が下に表示されます。Twitter ブートストラップを使用します。

<ul class="thumbnails">
    <li class="span3">
        <div class="hover-group thumbnail">
            <img src="http://placehold.it/260x180" alt="">
            <div class="hover-toggle btn-group">
                <button class="btn">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
            </div>
            <h5>Thumbnail label</h5>
            <p>Thumbnail caption right here...</p>
        </div>
    </li>
...
</ul>
4

2 に答える 2

6

ここでは JS は必要ありません。単純な CSS とマークアップを少し変更するだけですべてを実現できます (画像と .hover-toggle div を .image-wrapper div でラップしました)。

<ul class="thumbnails">
    <li class="span3">
        <div class="hover-group thumbnail">
            <div class="image-wrapper">
              <img src="http://placehold.it/260x180" alt="">
              <div class="hover-toggle btn-group">
                  <button class="btn">1</button>
                  <button class="btn">2</button>
                  <button class="btn">3</button>
              </div>
            </div>
            <h5>Thumbnail label</h5>
            <p>Thumbnail caption right here...</p>
        </div>
    </li>
...
</ul>

必要なスタイリングは簡単です。

.hover-group .image-wrapper {
  /* We need this to make the .hover-toggle div relative to .image-wrapper */
  position: relative;
}

.hover-group .image-wrapper .hover-toggle {
  /* set it at the bottom of .image-wrapper */
  position: absolute;      
  bottom: 0;
  /* and don't display it */
  display: none;
}

.hover-group .image-wrapper:hover .hover-toggle {
  /* only display it when .image-wrapper is being hovered on */
  display: block;
}

.hover-group 全体にカーソルを合わせたときに表示する場合は、最後の行の代わりに次の CSS を使用します。

.hover-group:hover .image-wrapper .hover-toggle {
  display: block;
}
于 2012-07-05T03:09:30.850 に答える
2

構造を変更しない場合は、div.hover-toggle の高さを設定してから、画像の余白を次のように設定できます。

margin:0 0 -30px 0;

どの 30 が適切な数値かは、div.hover-toggle の高さによって異なります。

ライブデモ: http://jsfiddle.net/4geFu/

于 2012-07-05T03:43:07.550 に答える