1

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

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

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

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

因此，在悬停时，兄弟 div (.property_info) 需要显示在图像 div (.property) 的右侧，但每行中最后两个的需要显示在左侧，因此它保留在容器/包装器中分区。请记住，数据将动态生成。

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

谢谢！

4

3 回答 3

1

让它与 CSS(3) 和 jQuery 的组合一起工作 - 感谢两位回答的人；我只需要朝着正确的方向前进。

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

于 2012-09-20T05:42:23.020 回答
0

你应该修复你的代码，你不应该在多个元素上使用相同的 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;
}
于 2012-09-19T21:45:42.633 回答
0

您可以为此使用 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。

希望这有帮助

于 2012-09-19T21:52:37.930 回答