圖像顏色懸停在溢出

只是一個簡單的圖像，使用一些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

圖像顏色懸停在溢出

回答

相關問題