CSS过渡 - 更改元素大小后不起作用

Question

背景

我正在自定义一个 tumblr 主题（来源：hasaportfolio），并且我正在尝试更改一个特定元素的大小。

:hover 上的此元素旨在过渡不透明度 - “淡入”。但是，发生的情况是，一旦我更改了像素大小，转换就会拒绝工作，并且根本不会出现新出现的内容。

HTML 代码

此应用的 HTML 代码如下。我已经尽力评论了。

<div class="post video featured"> <!-- wrapper, no css attached -->

    <div class="box-featured">

        <iframe src="http://player.vimeo.com/video/30284533" width="750" height="430" frameborder="0"></iframe>

        <div class="box-caption-text-featured"> <!-- this div and content is "hidden" (0% opacity) until :hover -->

            <h1>Paint</h1>
            <p>I hate yogurt. It's just stuff with bits in.</p>
            <p>You know how I sometimes have really brilliant ideas? You've swallowed a planet!</p>

        </div><!-- box-caption-text-featured -->

        <a href="#" class="box-caption-featured">#</a> <!-- this a is the "trigger" for the transition. Normally it would link to the post permalink -->

    </div><!-- box-featured -->

</div><!-- post -->

我还有这个代码的另一个副本，唯一的区别是它在每个类定义的末尾没有-featured。这样我就可以查看代码是否以其“原始”大小工作（确实如此）。

CSS 代码

运行这些框的原始代码如下：

.box { float:left; width:250px; height:130px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption, { width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:transparent; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text { color:#fff; width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }

我修改后的代码如下。我唯一改变的是width 和height 像素值。

.box-featured { float:left; width:750px; height:430px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption-featured { width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:#f00; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text-featured { color:#fff; width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption-featured { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text-featured { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }

我只是错过了一些愚蠢的事情，还是这段代码中的问题阻止了我正在尝试做的事情？

示例页面

有一个关于 over here 的例子。

Answer 1

此时我的想法是，您需要将其更改为：

.box-featured:hover