我想要实现一个相当简单的动画,其中标题和一个 div
在悬停时向上移动。问题在于这个 div
有一个透明度设置,这意味着标题必须放在它外面,以免取决于不透明度。所以现在标题没有与盒子一起移动。我应该分组元素还是更改 HTML/CSS 结构?
HTML:
<a class="gbox a2" href="#">
<div></div>
<h2>TITLE</h2>
</a>
CSS(层叠样式表):
.gbox {border:1px solid #aaa; position:relative;}
.gbox div {background:#ddd; opacity:0.75; height:80px; position:absolute; bottom:0; width:100%}
.gbox h2 {position:absolute; right:20px; bottom:12px; color:#000}
.a2 {width:338px; height:194px; background:#333; display:inline-block}
JavaScript:
$('.gbox').hover(
function() { $(this).children('div').animate({height: '+=10px'}, 200) },
function() { $(this).children('div').animate({height: '-=10px'}, 200) }
)
div
上使用rgba
背景颜色,从而将h2
放置在div
内吗? - Ben Jackson