即使父級已隱藏溢出，也會顯示溢出

我正在爲所述圖像設計圖像的滑塊以及標題。我想要做的就是讓標題逃離圖像的邊界。即使父級已隱藏溢出，也會顯示溢出

所以我所做的是我創建了一個整體的包裝。包裝div位於頁面中心位置position: relative;margin: 0 auto;，寬度爲500像素，隱藏溢出。

它裏面是雙倍寬度的圖像包裝。在圖像包裝內部有兩個div，每個都有一個標題。它們的寬度是500，並且它們的位置相鄰，float:left裏面的標題有一個'margin-left：-10px;'和絕對位置和overflow: visible;我想要的是標題溢出包裝外的10個像素。

無論如何我能做到這一點嗎？

下面是一個例子代碼

HTML：

<div id="wrap"> 
<div id="imgwrap"> 
    <div id="imgbox" class="firstimg"> 
     <div id="imgtitle"> 
      <h3>Title here</h3> 

     </div> 
    </div> 
    <div id="imgbox" class="secondimg"> 
     <div id="imgtitle"> 
      <h3>Title here</h3> 

     </div> 
    </div> 
</div> 
</div>

JS：

jQuery(document).ready(function ($) { 
$("#imgwrap").mouseleave(function() { 
    $(this).find('#imgbox').stop().css('marginLeft', '0'); 
    $(".secondimg").find('#imgtitle').stop().css('marginLeft', '0'); 
}).mouseenter(function() { 
    $(this).find('#imgbox').animate({ 
     marginLeft: '-500px', 
    }, 1000); 
    $(".secondimg").find('#imgtitle').animate({ 
     marginLeft: '-10px', 
    }, 1000); 
}); 
});

CSS：

#wrap { 
width: 500px; 
position: relative; 
margin: 0 auto; 
overflow:hidden; 
} 
#imgwrap { 
overflow:hidden; 
background: red; 
height: 500px; 
width:200%; 
position: relative; 
} 
#imgbox { 
float:left; 
height: 250px; 
width: 500px; 
overflow: visible; 
position:relative; 
top:20% 
} 
.firstimg { 
background: blue; 
} 
.secondimg { 
background: green; 
} 
#imgtitle { 
background: black; 
width: auto; 
position: absolute; 
overflow: visible; 
bottom:0; 
} 
.firstimg #imgtitle { 
margin-left: -10px; 
} 

h3 { 
font-size:20pt; 
line-height: 0em;  
color:white; 
padding: 0 80px 0px 10px; 
}

Link to Fiddle

來源

2013-10-08 Gatos

你是什麼意思「稱號溢出之外的10個像素包裝器「 –

與您的問題無關，但您以相反的方式獲得'id'和'class'屬性。也許[這篇文章]（http://css-tricks.com/the-difference-between-id-and-class/）可以幫助你。 – Sunyatasattva

@VinayPandey如果你注意到標題有'margin-left：-10px;' – Gatos

在你的#wrap中添加padding-left:10px。

從#imgWrap

刪除overflow:hidden在JavaScript中，編輯這部分

$(this).find('#imgbox').animate({ 
     marginLeft: '**-510px**', 
    }, 1000);

這裏的JFiddle：http://jsfiddle.net/k3cPK/7/

來源

2013-10-08 04:18:35

謝謝你填充左邊的伎倆！ – Gatos

該div.imgtitle將增長以適應內容，因爲你有width:auto。明確地設置了一個width:150px並且也設置了white-space:nowrap並且它應該溢出

來源

2013-10-08 04:13:31 gwillie

即使父級已隱藏溢出，也會顯示溢出

回答

相關問題