使用css在其他div上悬停一个具有一些不透明度的div

Question

我的要求是让div与底部的另一个div重叠，正如您在第一张图片中看到的那样，当您将鼠标悬停在图像上时，我需要它来获得类似于第二张图像的效果。

这是我的html代码，但我不知道如何正确处理鼠标事件。

<div id="container">
    <div class="overlay">This is overlay div.</div>
    <div class="content">This is contents div. This is contents div.</div>
</div>


#container {
    position: relative;
}

.overlay, 
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}



 .overlay, 
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}

但它并不像我想的那样有用。有人能给我一些建议吗？

Answer 1

http://jsfiddle.net/mAzsL/

这里是男人。

<div class="container">
    <div class="lower">Blah Blah Blah</div>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat elit vel tortor porta, sit amet venenatis purus condimentum. Suspendisse potenti. Aenean ultrices velit ac mattis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>
</div>

.container{
    width:250px;
    height:300px;
    background:#00f;
    position:relative;
}

.lower{
    position:absolute;
    bottom:0;
    width:100%;
    color:#fff;
    padding:10px 0;
    text-indent:5px;
    background:rgba(0,0,0,.5);
}

.show{
    display:none;
    height:100%;
    width:100%;
    color:#000;
    text-indent:5px;
    background:rgba(255,255,255,.5);
}

.container:hover > .lower{
    display:none;
}

.container:hover > .show{
    display:block;
}

这是一个相同的小提琴，但内容滑动到位。我添加了这个，因为SiKni8问为什么它没有滑动。

http://jsfiddle.net/mAzsL/15/

基本上，我将所有内容移动到一个容器中，在悬停时添加了转换。非常简单的变化。

Answer 2

类似

<div class="container">
    <img src="http://placehold.it/150X200/fff000" />
    <div class="inner">
        somecontent goes here
        <div class="overlay">sho on hover</div>
    </div>
</div>

和

.container {
    position: relative;
    display: inline-block;
}
.container .inner {
    position: absolute;
    bottom: 0;
    opacity: .85;
}
.container .inner .overlay {
    display: none;
}
.container:hover .inner .overlay {
    display: block;
}

演示：Fiddle