即使父级已隐藏溢出，也会显示溢出

我正在为所述图像设计图像的滑块以及标题。我想要做的就是让标题逃离图像的边界。即使父级已隐藏溢出，也会显示溢出

所以我所做的是我创建了一个整体的包装。包装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

即使父级已隐藏溢出，也会显示溢出

回答

相关问题