CSS-only悬停在div - unhide文本在CodePen，但不是在我的WP网站

Question

我试图设置一个div，显示文本在图像上，当你悬停在它。它在CodePen上工作得很好，但在我的WordPress网站上不行。我尝试了一些CSS，但是我尝试的东西都没有成功。工地正在建设中。有什么建议吗?

下面是CodePen的代码:http://codepen.io/Clare12345/pen/RWoxRB。也适用于小提琴:http://jsfiddle.net/Clare12345/yxap7n30/:/

HTML:

    <div class="container">
        <div class="sep">
            <div class="image-hover img-layer-image-hover-backgroundchange">
                <img src="http://www.plici.ro/images/3-1386110366.jpg">
                <div class="layer">this text should appear on hover</div>
            </div>
        </div>
</div>

和CSS:

/****** image hover ******/
.image-hover * {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.image-hover { position:relative;width:450px;height:200px;display:inline-block;overflow:hidden;background:#fff;border:10px solid #fff;box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3)}
.image-hover a { text-decoration: none; }
/*** effect layer-image hover - background change ***/
.img-layer-image-hover-backgroundchange .layer { position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0.6;background-color:#000;background-image:url("icons/lupe.png");background-repeat:no-repeat;background-position:center center}
.img-layer-image-hover-backgroundchange:hover .layer {opacity:0.5;background-color:#fff;
}
.img-layer-image-hover-backgroundchange .layer {
transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
}
.img-layer-image-hover-backgroundchange:hover .layer {
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}

Answer 1

哦，我明白了。事实证明，我需要将子div设置为在悬停在父div上时显示，而在未悬停时不显示子div。

当父元素悬停时，使用jQuery改变子元素的CSS(只是CSS部分，不是第一个答案)

谢谢! !