CSS - :Hover 在没有绝对定位的情况下不起作用

Question

css 假设使标题沿着它所做的其他一些 CSS3 效果从左侧滑出。

但是我需要position: absolute;从.box img. 但是，当我这样做时，:hover事件 on.box似乎不再起作用。

JSFiddle

我注释掉了有position: absolute;问题的。

HTML：

<div class="container">
    <div class="box">
        <img class="box-image" src="http://knyz.org/blog/content/images/2015/01/Ghost-vs-WP.png"/>
        <span class="caption scale-caption">
            <h3>Ghost vs Wordpress</h3>
            <p>What is ghost again? Ghost is a free blogging platform like WordPress. Although similar there are key differences which in my mind, make Ghost the go-to blogging platform. Just a Blogging Platform That is the most important difference. Ghost says upfront what they are about and always will be</p>
        </span>
    </div>
    <div class="box">
        <img class="box-image" src="http://knyz.org/blog/content/images/2015/01/owncloud-registration.jpg"/>
        <span class="caption scale-caption">
            <h3>OwnCloud Registration Script - Fixed!</h3>
            <p>'Bout time! I am really sorry for the long wait. I was very busy and was really not motivated to work on it after it broke for the second time. That said, you shouldn't blame me, blame ownCloud for not making it themselves! The important thing however is that now</p>
        </span>
    </div>
</div>

CSS：

.container {
    width: 500px;
}

.box {
    border: 5px solid #fff;
    cursor: pointer;
    height: 270px;
    float: left;
    margin: 5px;
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}

.box img {
        /*
        position: absolute;/**/
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    width: 100%;
}

    /* Caption Common Style */
.box .caption {
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    position: absolute;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}

    /** Caption 3: Fade **/
.box .fade-caption, .box .scale-caption {
    opacity: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 15px;
}
    /** Caption 6: Scale **/
.box .scale-caption h3, .box .scale-caption p {
    position: relative;
    left: -200px;
    width: 90%;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.box .scale-caption h3 {
    -webkit-transition-delay: 0ms
        -moz-transition-delay: 0ms
        -o-transition-delay: 0ms
        -ms-transition-delay: 0ms
        transition-delay: 0ms;
}

.box .scale-caption p {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    transition-delay: 300ms;
}

    /** Fade Caption :hover Behaviour **/
.box:hover .fade-caption, .box:hover .scale-caption {
    opacity: 1;
}
    /** Scale Caption :hover Behaviour **/
.box:hover .box-image {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

.box:hover .scale-caption h3, .box:hover .scale-caption p {
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
}

我将如何解决这个问题？

Answer 1

添加top: 0到.box .caption. （更新示例）

当img元素被绝对定位时，它被从正常流中移除，因此.caption被放置在它的顶部，因为它也是绝对定位的。如果您从img元素中移除绝对定位，它会再次成为流的一部分，因此需要将.caption元素定位在顶部。（因此，top: 0相对于父元素）。

.box .caption {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;     /* Added */
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}