Question

只是一个简单的图像，它使用一些jQuery在moused结束时淡化顶部的一些内容。唯一的问题是，当悬停结束时，悬停会溢出到div沟槽中，使悬停超过实际容器。

每张图片都是这样排列的

<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1><a href="#"></a></div>
<img class="display" src="http://placehold.it/400x300">
</li>

可以在这里看到一个实例。 http://jsfiddle.net/QLUMH/

关于如何修复/改善我在这里做的事情的任何想法？干杯

Answer 1

Demo

这里有实例，你给100％的宽度和高度。所以真的会溢出。

代码编辑 -

#portfolio .description {
        position: absolute;
        background: rgba(0,199,134,0.8);
        display: none;
        width: 400px;
        height: 300px;
    }

Answer 2

问题是您的描述会填满整个列，该列比图像宽。如果您添加一个“内部列”/容器折叠到与图像相同的宽度，它将正常工作。我创建了a fork of your demo来证明这一点。

我在每个.column.item中添加了一个包装“ib”（只代表内部块。重命名为一个正确的名称），如下所示：

<div class="ib">
    <div class="description">
       <h1>Image hover</h1><a href="#"></a>
    </div>
    <img class="display" src="http://placehold.it/400x300">
</div>

然后只是创建了一个非常简单的CSS规则，使这个包装器折叠到其内容：

.ib {
    display: inline-block;
    position: relative;
}

Answer 3

CS的变化会有所帮助，

我在fiddle

中更新了相同内容

改变CSS，

#portfolio .description {
    position: absolute;
    background: rgba(0,199,134,0.8);
    display: none;
    width: 400px;
    height: 300px;
}

#portfolio .description h1 {
    color: white;
    opacity: 1;
    font-size: 1.4em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}

更新

如果H1创建了额外的切割和包装问题（对于某些人来说），请使用DIV代码，这应该可以正常使用！

我希望这能解决你的问题：）

Answer 4

您没有为li设置样式。问题是在foundation.css中得到padding-left和padding-right。您需要将其删除，然后使用margin-left和margin-right。而且您还需要修复li的宽度。因为.description将达到100％的高度。所以你需要在你自己的文件中包含一个小的CSS（不要修改foundation.css）。

#portfolio li.columns{
    /* You can use the width in '%' if you want to make the design fluid */
    width: 400px;
    padding: 0px;
    margin: 0px 0.9375em;
}

Fiddle

Answer 5

你只需要摆脱li

上的填充

li{ padding:0 }

或使用box-sizing属性：

`li {box-sizing：border-box; -moz-箱尺寸：边界盒; }

图像颜色悬停溢出

5 个答案: