我正在为图像设计一个 slider 以及所述图像的标题。我想要做的是让标题脱离图像的边界。
所以我所做的是为整个事情创建一个包装器。包装器 div 位于页面中心,position: relative;margin: 0 auto;
宽度为 500 像素, overflow hidden 。
里面是双倍宽度的图像包装器。在图像包装内有两个 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;
}
最佳答案
在 #wrap 中添加 padding-left:10px
。
从你的#imgWrap 中移除overflow:hidden
在你的javascript中,编辑这部分
$(this).find('#imgbox').animate({
marginLeft: '**-510px**',
}, 1000);
这是 JFiddle:http://jsfiddle.net/k3cPK/7/
关于jquery - 即使父级隐藏了溢出也显示溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19238704/