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

Question

我在同级div中有一个带有附加信息的图像网格，需要在图像悬停时显示，然后在光标离开图像时消失。 我在这里查看了几个类似的问题，但没有一个真正适合我的实际需求。

这是针对我继承的网站，该网站使用了我要切换到jQuery的另一个JS库，但是由于我仍在学习jQuery，因此很难弄清楚这一点。

我在这里设置了HTML和CSS： http ： //jsfiddle.net/EQ2fG/

这里有我需要的屏幕截图： http : //cl.ly/JZkK

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

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

谢谢！

Answer 1

通过CSS（3）和jQuery的组合使它可以工作-感谢双方的回复； 我只需要朝正确的方向推进。

http://jsfiddle.net/angieherrera/EQ2fG/46/

Answer 2

您应该修复您的代码，多个元素上不应具有相同的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并设置property_grid的高度，使其紧密包裹内容。

JS：

$("#property_grid").mouseleave(function(){
    $(".prop_info").hide();
});​

CSS：

#property_grid {
    width: 959px;
    height: 182px;
    margin: 0 auto;
}

Answer 3

您可以为此使用css，但是IE的较早版本不支持此功能。 而且我也不确定这是否是您想要/需要的。 但是，无论哪种方式都希望对您有所帮助。

将.prop_info的以下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_info现在位于.property内部，如下所示：

<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或第4位。我现在无法进行测试，因为这完全取决于网站的宽度以及是否适应网站。

但您可以使用以下CSS：

.property .prop_info:nth-child(4n+4) {
    left: -410px;
}

它的作用是使第4个元素找到不同的左边界。如果您需要每5个左边界，只需将4n + 4更改为5n + 5。

希望这对您有帮助