0

画像の行を作成しようとしていて、ホバーすると、価格やアイテムへのリンクなど、アイテムに関する詳細情報が表示されます。現在ホバーすると、詳細情報 (黄色) を含むボックスがアイテムの下に表示されています。右側に情報、左側にアイテムの画像を含む 1 つの要素として表示したいと考えています。また、次のアイテムをスライドさせたくありませんが、次のアイテムの上に情報表示の黄色のボックスを表示します。説明するのはかなり難しいので、基本的なコードを見てみましょう: http://jsfiddle.net/ryanabennett/bFZDL/1/

おそらく質問からわかるように、私はコーディングにかなり慣れていないため、さまざまな位置要素をずっと試してきましたが、何も機能していないようです。うまくいけば、あなたが助けることができます.

ここに私のHTMLがあります：

<div class="productbox">
 <div class="livitem">
  <div class="Livwidgetexpandimg">
   <a href="#"><img src="#" class="popupbox" /></a>
     <div class="popup"></div>
   </div>
  </div>
 </div>
<div class="productbox">
  <div class="livitem">
    <div class="Livwidgetexpandimg">
      <a href="#"><img src="#" class="popupbox" /></a>
     <div class="popup"></div>
   </div>
  </div>
 </div>

ここに私のCSSがあります:

.productbox{
float: left;
height: 150px;
margin-left: 5px;
overflow: hidden;
}

.livitem{
float: left;
position: relative;
top: 3px;
}

.livitem:hover{
background: yellow;
}

.Livwidgetexpandimg{
background: blue;
height: 75px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
padding: 5px;
width: 75px;
float: left;
}

.popupbox{
border: medium none;
height: 75px;
width: 75px;
}

.popup{
background: yellow;
display: none;
float: left;
height: 122px;
margin-left: -10px;
opacity: 0;
width: 175px;
z-index: 50;
}

これが私のJQueryです：

$(function () {
    $('.livitem').each(function () {
        var distance = 10;
        var time = 200;
        var hideDelay = 1;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('.Livwidgetexpandimg', this);
        var info = $('.popup', this).css('opacity', 0);


        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({
                    top: 10,
                    left: -3,
                    display: 'block'
                }).animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }

            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
   });

うまくいけば、あなたは私を助けることができるでしょう...

4

1 に答える 1

2

これがあなたが探しているものだと思います：http://jsfiddle.net/vCbMt/1/

これを現在のコードと比較して変更を確認します。より適切に機能させるために、さらに削除できると思われます。基本的に、絶対配置と巧妙な z-index 作業が必要です。

この例は、Chrome でのみテストされています。IE で z-index を機能させるには、追加の css が必要になる可能性が高いです。これは IE の根本的な問題です。ここや他の場所で多くのトピックが修正を扱っています (ヒント:相対位置を使用してスタックを構築します) 。

これが役立つことを願っています！

于 2011-07-14T21:04:00.843 に答える