css - 两个页面和一个 CSS，悬停弹出窗口的不同行为

Question

对于相同的标记，在两个不同的页面上，隐藏的 div 会根据鼠标光标的位置弹出并显示自身，这是有差异的。基本上，div.blurb 会在第 1 页的 Angular 落弹出，而在第 2 页它会显示在光标附近它应该出现的位置。由于布局不同，第 2 页缺少下面的粗体元素。

标记层次结构(粗体表示出现在第 1 页但未出现在第 2 页的标记层次结构):

• html
• 正文
• div#cn-body-inner-2col
• div#cn-cols
• div#cn-centre-col
• div#cn-center-col-inner
• table.plainTable
• 正文
• tr
• td
• div#contact_sheet
• div.box
• 一个
• 图片

我的标记:

<div id="contact_sheet">
    <div class="box">
        <a href=""><img /></a>
        <div class="blurb">
        </div>
    </div>
    <div class="box">
        <a href=""><img /></a>
        <div class="blurb">
        </div>
    </div>
    ... 
</div>

用于标记的 CSS:

#contact_sheet{
    margin-top: 50px;
}

#contact_sheet .box {
  width: 150px;
  margin: 5px;
  padding: 5px;
  float: left;
  border: 1px solid #887767;
  text-align: center;
  background-color: #fff;
}

#contact_sheet .box a img{
    height: 100px;
}

#contact_sheet .box .blurb {
    position:absolute;
    display:none;
    z-index:9999;
    background-color: #fff;
    color:#000;
    border: 1px solid black;
    width: 300px;
    text-align: left;
}

jQuery:

$(document).ready(function(){
        $("#contact_sheet div.box").bind("mousemove", function(event) {
        $(this).find("div.blurb").css({
        top: (event.pageY) + "px",
        left: (event.pageX - 150) + "px"
        }).show();
    }).bind("mouseout", function() {
        $("div.blurb").hide();
    });
});

下面的 CSS(包含在布局中)是否是我的弹出窗口在第 1 页上悬停的问题比它应该的更远？我使用 Chrome 浏览层次结构，并从上面提到的标记层次结构中的粗体元素中获取与定位相关的所有样式。

#cn-body-inner-2col #cn-centre-col {
    margin-right: -100%;
}

#cn-centre-col, #cn-centre-col-gap {
    float: left;
}

#cn-centre-col {
    width: 100%;
}

#cn-centre-col, #cn-head, #cn-foot, #cn-left-col, #cn-right-col {
    position: relative;
}

差: http://i.imgur.com/kVbh4.png

好: http://i.imgur.com/rJi7n.png

我尝试过的:

• 将 position: static 添加到我的 contact_sheet ID - 没有用

Answer 1

我觉得你的问题是

float:left; 

和

position:relative;

在你的#cn-centre-col ID

在其中放置弹出窗口有很大的不同