jQuery和位置：相对搞乱我的悬停！为什么？

所以我有一个与jQuery的悬停工具提示有点问题 - 如果我的css中的父级div“位置”属性设置为“相对”，然后工具提示飞走到屏幕的左上角。如果我删除位置属性，那么世界上一切都很好，工具提示又回来了。jQuery和位置：相对搞乱我的悬停！为什么？

我真的不得到的jQuery或CSS的定位规则太清楚，所以问题是：

为什么位置：相对搞乱了jQuery的工具提示位置？
如果我确实需要这个职位：亲戚（我不这样做），我能做些什么来解决这个问题？

相关的代码是：

$("yay").hover(
function(){ 
    // .position() uses position relative to the offset parent, 
    var pos = $(this).position(); 
    // .outerWidth() takes into account border and padding. 
    var width = $(this).outerWidth(); 

    var messageToLoad = dumpArray[$(this).attr('class')]; 
    $(messageToLoad).css({ 
     left: (pos.left + width) + "px", 
     top: pos.top + "px", 
     position: "absolute", 
     "visibility":"visible", 
     "display":"inline" 
    }); 
},

，然后将（违规）的CSS是：

.content { 
    margin: 0 0 0 35px; 
    position:relative; 
}

和HTML是：

... 
<tr class="PostOdd"> 
    <td> 
    <div class="contents"> 
     <div class="content"> 
      <p> Brand new post goes here</p> 
      <p class="postDate">June 15, 2012, 4:02 a.m.</p> 
      <p class="options"> 
       <a href="/comments/1/1"> 
        <img class="yay" src="/static_files/chat-icon.png"> 
       </a> 
      </p> 
     </div> 
    </div> 
...

UPDATE：

a。3210

a。我只使用jquery，根本没有其他java插件

b。如果我移除了“位置”attribue的父母在css文件，然后一切正常。其实，我已经把它删除了，所以这对我来说不是一个好奇心的问题。我正在研究另一部分 - 如果在完成该部分的时候我还没有得到答案，我会抽出一个jfiddle演示

来源

2012-06-16 bharal

创建[jsfiddle.net]简化的演示（http://jsfiddle.net/）....你还没有提供足够的代码来解决问题，尤其是使用伪选择器，比如'yay' – charlietfl

通常你将'relative'应用于父容器风格，然后是'absolute'，'fixed'或者别的东西给子元素想要保持在父元素的范围内。家长和孩子与两者相对设置有时会导致凌乱的意外行为（至少从我自己的经验） – chris

请回答这些问题。 1）你使用的是一个jQuery插件还是你创建了这个Javascript代码？如果您使用插件，它是什么？ 2）如果你删除'位置相对'属性，你会在布局中遇到一些问题吗？ –

我认为这是因为DIV“.content “是第一个定位元素。例如，看到这种结构：

<div class="great-grandfather"> 

    <div class="grandfather"> 

     <div class="father"> 

      <div class="son"> 

       <img class="yay" src="/static_files/chat-icon.png"> 

      <div> 

     </div> 

    </div> 

</div>

当你把鼠标放在与类“耶”的形象，因为它被设定为position: absolute，为你的姿势用的基准是有第一父元素相对或绝对职位财产。

如果DIV“.son”具有相对位置或绝对位置，“.yay”图像将根据“.son”协调您的位置。如果是“.father”，则根据“.fahter”等等。

如果所有父母都有位置属性，可以是相对或绝对的，将被视为第一个父元素，在本例中为“.son”。

希望我能帮你解释，如果你有疑问，请留下评论，我会编辑答案。

来源

2012-06-16 23:32:26

我喜欢你所说的 - 所以如果我把“儿子”设置为“位置：亲戚”，那么我需要做些什么来让“.yay”的合作伙伴设置为绝对？设置位置：“.yay”的绝对不适用于我 – bharal

尝试使用'position：absolute;'和'.son'设置'.yay'位置：relative;' –

您必须看看JQuery代码我认为你的问题出现在'hover（）'事件中，更具体的说是'.css（）'方法。做一些测试，改变值来看看会发生什么。 –

您可能需要的z-index添加到您的内容类是这样的：

.content { 
    margin: 0 0 0 35px; 
    position: relative; 
    z-index: 1; 
}

来源

2012-12-11 17:28:08

jQuery和位置：相对搞乱我的悬停！为什么？

回答

相关问题