图像颜色悬停在溢出

只是一个简单的图像，使用一些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/

关于如何解决/改进我在这里做的事情的任何想法？干杯

来源

2013-03-11 Curia

及其不会从容器的默认图像的宽度比悬停一个小的。但容器（LI）是具有整个屏幕 – krish 2013-03-11 05:59:33

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

我已经在每个.column里面添加了一个包装“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-11 07:41:41 PatrikAkerstrand

正是我需要的感谢，我尝试了类似的方法，但没有完全工作，所以谢谢。 – Curia 2013-03-11 10:36:02

Demo

这里有活生生的例子，你给100％的宽度和高度。这样真的溢出。

代码edited-

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

来源

2013-03-11 06:01:19 Manoj

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

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

来源

2013-03-11 06:03:58 MarmiK

对不起，我应的补充说，这是一个流体格，所以内容被特意扩大到100％来填充容器的宽度，但它仍跳进之间的沟容器。 – Curia 2013-03-11 06:07:22

注意：只有改变.description不会有帮助。 – MarmiK 2013-03-11 06:12:44

设置一个div到的位置是：绝对从没有也放置任何容器中删除，因此，如果您设置宽度为100％ - 在这种情况下 - 就会把你的页面的整个宽度。正如另外两个人所说，在这种情况下，您还必须使用绝对高度和宽度。 – iGanja 2013-03-11 06:15:24

你没有风格你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

来源

2013-03-11 06:16:32

你只需要得到对TNE li摆脱填充

li{ padding:0 }

或使用该box-sizing属性：

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

来源

2013-03-11 07:59:42 xpy

图像颜色悬停在溢出

回答

相关问题