0

我正在尝试创建一行图像并悬停 - 显示有关该项目的更多信息，例如价格和该项目的链接。现在悬停时，包含更多信息的框（黄色）显示在项目下方，我希望它显示为一个元素，右侧是信息，左侧是项目图片。我也不希望它滑过下一个项目，而是在下一个项目的顶部显示黄色的信息框。很难解释，所以看看基本代码：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 中进行了测试。很有可能需要一些额外的css 才能让 z-index 在 IE 中工作。这是 IE 中的一个基本问题，这里和其他地方的许多主题都涉及修复（提示：使用相对位置构建堆栈）

我希望这有帮助！

于 2011-07-14T21:04:00.843 回答