0

好的，我有以下代码：https ://jsfiddle.net/7u1aLxaw/

所以问题是，当您将鼠标悬停在图像上时，它会显示一个具有该图像特定名称的叠加层。但是，如果名称长于图像宽度，则紧靠右侧的图像会被推开，并且叠加层不会以图像为中心。它只向右扩展，而不是在两侧。

我不知道如何使叠加层居中并避免它影响两侧的 div。

*我尝试使用display: none，但我想保留 CSS3 过渡。使用display: none完全删除元素会删除 CSS3 过渡。

有任何想法吗？

4

2 回答 2

0

工作 jsFiddle：http: //jsfiddle.net/q8SER/3/

我不得不改变一大堆东西才能​​让它工作。

首先，我更改了 HTML 结构，并将覆盖 div 放在图标 div 之前。

这是新的叠加 CSS：

.item_overlay {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

现在，因为内部 div（覆盖）溢出了父 div，我不能按照惯例使用自动边距将其居中，所以我实现了一个 jQuery 解决方案。

JS代码：

$(".item_overlay").each( function() {
    var offset = ($(this).parent().width() - $(this).width()) / 2;
    $(this).css("left", offset + "px");
});

希望有帮助。

于 2013-08-19T00:32:36.903 回答
0

.item_overlay将您的样式更改为：

.item_overlay {
        height: auto;
        width: auto;
        margin: 0 auto;
        margin-top: -95px;
        position: absolute;
        z-index: 1;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }

将位置设为绝对会忽略其他元素的位置，然后设置负上边距会将其移回顶部。http://jsfiddle.net/q8SER/2/

于 2013-08-19T00:19:34.030 回答