javascript - 使用 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;
}

演示：小提琴