Javascript 如何使用jQuery在悬停时显示绝对定位的同级div？

我在一个兄弟div中有一个带有伴随信息的图像网格，当图像悬停在上面时需要显示，然后当光标离开图像时消失。我在这里已经研究了几个类似的问题，但没有一个能真正满足我的需求

这是为了一个我继承的使用不同JS库的站点，我正在切换到jQuery，但我很难弄清楚这一点，因为我还在学习jQuery

我在这里设置了HTML和CSS：

这里有我需要的屏幕截图：

因此，悬停时，同级div（.property_info）需要显示在image div（.property）的右侧，但每行最后两个的同级div需要显示在左侧，以便它保留在容器/包装器div中。请记住，数据将动态生成

我希望这是有道理的。任何帮助都会非常非常有帮助

---

谢谢大家!

您应该修复代码，在多个元素上不应该有相同的ID。 然而，我认为这应该是可行的：

$(".property").mouseover(function(){
    var wid=$(this).outerWidth();
    var left=$(this).position().left+wid;
    if(left+wid*2>$(this).parent().width())left=$(this).position().left-wid*2;
    var top=$(this).position().top;
    $(".prop_info").hide();
    $(".prop_info").eq($(".property").index($(this))).show().css({"opacity":1,"left":left,"top":top});
});
$("#property_grid").mouseout(function(){
    $(".prop_info").hide();
});

​ 编辑： 要使其在悬停时保持可见，请将mouseout更改为mouseleave，并设置属性网格的高度，使其紧密包裹内容

JS:

CSS:

---

你应该修复你的代码，你不应该在多个元素上有相同的ID。 然而，我认为这应该是可行的：

$(".property").mouseover(function(){
    var wid=$(this).outerWidth();
    var left=$(this).position().left+wid;
    if(left+wid*2>$(this).parent().width())left=$(this).position().left-wid*2;
    var top=$(this).position().top;
    $(".prop_info").hide();
    $(".prop_info").eq($(".property").index($(this))).show().css({"opacity":1,"left":left,"top":top});
});
$("#property_grid").mouseout(function(){
    $(".prop_info").hide();
});

​ 编辑： 要使其在悬停时保持可见，请将mouseout更改为mouseleave，并设置属性网格的高度，使其紧密包裹内容

JS:

CSS:

---

你可以使用css，但是旧版本的IE不支持css。我也不确定这是否是你想要/需要的。但不管怎样，我希望这能有所帮助

将.prop_信息的以下css更改为：

.property .prop_info {
    width:274px;
    height:90px;
    background:url(/resources/images/backgrounds/agent-info-bg.jpg) top left no-repeat transparent;
    background: #0d70b2;
    position:absolute;
    left:136px;
    top: 0px;
    display: none;
    z-index: 10;
}

然后在下面添加以下内容：

.property:hover .prop_info {
    display: block;   
}

这样做的目的是，无论何时将鼠标悬停在.property元素上，其中的.prop_info元素都将可见。但是，这需要您更改html布局，以便.prop_信息现在位于.prop属性中，如下所示：

<div class="property" id="property{count}" style="display: block;">
    <a href="#"><img src="http://placehold.it/136x90/eeeeee/cccccc/&text=placeholder" /></a>
    <div  class="prop_info">
        <div id="property_info_content">[ content goes here ]</div>
    </div>
</div>

它所做的是，它给每四个元素一个不同的左边距。。如果您需要每隔5次，只需将4n+4更改为5n+5即可

---

希望这对您有所帮助

您可以使用css来实现这一点，但是旧版本的IE不支持这一点。我也不确定这是否是您想要/需要的。但不管怎样，我希望这能有所帮助

将.prop_信息的以下css更改为：

.property .prop_info {
    width:274px;
    height:90px;
    background:url(/resources/images/backgrounds/agent-info-bg.jpg) top left no-repeat transparent;
    background: #0d70b2;
    position:absolute;
    left:136px;
    top: 0px;
    display: none;
    z-index: 10;
}

然后在下面添加以下内容：

.property:hover .prop_info {
    display: block;   
}

这样做的目的是，无论何时将鼠标悬停在.property元素上，其中的.prop_info元素都将可见。但是，这需要您更改html布局，以便.prop_信息现在位于.prop属性中，如下所示：

<div class="property" id="property{count}" style="display: block;">
    <a href="#"><img src="http://placehold.it/136x90/eeeeee/cccccc/&text=placeholder" /></a>
    <div  class="prop_info">
        <div id="property_info_content">[ content goes here ]</div>
    </div>
</div>

它所做的是，它给每四个元素一个不同的左边距。。如果您需要每隔5次，只需将4n+4更改为5n+5即可

---

希望这有什么帮助

让它与CSS（3）和jQuery的组合一起工作-感谢两位回复的人；我只需要往正确的方向推一下

---

通过CSS（3）和jQuery的组合实现了这一功能-感谢两位回复的人；我只需要往正确的方向推一下

---

您似乎在多个元素上使用了相同的id名称。这是不可能的，并且可能会弄乱JQuery代码，因为您似乎在多个元素上使用相同的id名称。这是不可能的，并且可能会弄乱您的JQuery代码，相同ID上的好捕获-是过多复制和粘贴的结果。：）上述方法有效，但不允许您进入.prop_信息（对不起，我可能应该提到这一点）。相同ID的捕获效果很好-是复制和粘贴太多的结果。：）上面的方法可以工作，但它不允许您进入.prop_信息（对不起，我可能应该提到这一点）。这非常非常接近，但由于某些原因：n子选择器不工作。瞧，我一直在拔头发，不知道为什么它不起作用。也尝试过：第n种类型且不成功：/终于成功了。使用jQuery确保它在IE8中工作。只需使用

.property:nth child（7n+7）

div即可。这非常非常接近，但由于某些原因：nth child选择器无法工作。瞧，我一直在拔头发，不知道为什么它不起作用。也尝试过：第n种类型且不成功：/终于成功了。使用jQuery确保它在IE8中工作。只需使用

.property:n第n个子项（7n+7）

div即可。