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

CSS转换 - 在更改元素大小后无法正常工作

1 个答案: