如何在保持绝对定位的情况下，根据其他元素来实现文本动画效果。

Question

我想要实现一个相当简单的动画，其中标题和一个 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) }
)

http://jsfiddle.net/YS2s9/

- greener

---

基于这里的HTML，您不是可以在div上使用rgba背景颜色，从而将h2放置在div内吗？ - Ben Jackson

Answer 1

您是否有特定情况需要仅选择动画中的 div 元素？修改脚本是否能产生所需的结果？

$('.gbox').hover(
    function() { $(this).children().animate({height: '+=10px'}, 200) },
    function() { $(this).children().animate({height: '-=10px'}, 200) }
);

- Chris Kempen

---

因此，分组是解决问题的途径。谢谢！ - greener

在这种情况下，是的，这将是最合适的方式 ;) - Chris Kempen