1

只是一个简单的图像，当鼠标悬停时，它使用一些 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/

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

4

5 回答 5

2

演示

在这里你有一个活生生的例子，你给宽度和高度 100%。所以真的会溢出。

代码编辑-

#portfolio .description {
        position: absolute;
        background: rgba(0,199,134,0.8);
        display: none;
        width: 400px;
        height: 300px;
    }
于 2013-03-11T06:01:19.977 回答
1

问题是您的描述填充了整个列，比您的图像更宽。如果您添加一个折叠到与图像相同宽度的“内列”/容器，它将正常工作。我已经为你的演示创建了一个分支来演示这一点。

我在每个 .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;
}
于 2013-03-11T07:41:41.783 回答
0

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标签，它应该可以正常工作！

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

于 2013-03-11T06:03:58.967 回答
0

你没有设计你的li. 问题是在foundation.css 中它正在获取padding-left和padding-right。您需要删除它并使用margin-leftandmargin-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;
}

小提琴

于 2013-03-11T06:16:32.147 回答
0

你只需要摆脱 tne 上的填充li

li{ padding:0 }

或使用box-sizing属性：

`li { box-sizing:border-box; -moz-box-sizing:边框框；}

于 2013-03-11T07:59:42.750 回答