图像彩色悬停溢出

Question

只是一个简单的图像，使用一些jQuery在鼠标悬停时淡化顶部的一些内容。唯一的问题是，当悬停生效时，悬停会溢出到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

问题是你的描述填满了整个列，这比你的图像更宽。如果你添加一个"内列"/容器，折叠到与你的图像相同的宽度，它会正常工作。我在你的演示中创建了一个分支来演示这一点。

我添加了一个包装器"ib"(只是代表内部块)。在每个.column内将其重命名为合适的名称。项目如下:

<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

您没有样式化您的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;
}

小提琴

Answer 4

你只需要去掉li

的内边距

li{ padding:0 }

或者使用box-sizing属性:

' li {font - family:宋体;-moz-box-sizing: border-box;}

Answer 5

改变CSs会有帮助，

我在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标签代替，这应该可以正常工作!

我希望这将解决你的问题:)