在CSS悬停时更改div位置

Question

我想改变两个div的位置时悬停在一个div。在下面的代码中，当我悬停在.img div上时，我想移动顶部的.title div（位置例如top:50px)，并在其下方显示最初设置为隐藏的.info div。

我正在尝试跟随代码，但似乎不工作的悬停。我将感谢任何帮助。

HTML：

<div class="box">
    <div class="img"><img src="http://i281.photobucket.com/albums/kk240/leahhaudrey/bubbles.jpg" /></div>
    <div class="title">Lorem ipsum dolor sit amet</div>
    <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet velit nec turpis tempus vehicula. Integer congue feugiat eros ac interdum. </div>

</div>

CSS：

img{
    display: block;
}

.title,
.info{
    background: white;
}

.box{
    position: relative;
    display: inline-block;
}

.title{
    position: absolute;
    bottom: 10px;
}

.info{
    display: none;
    position: absolute;
    bottom: 10px;
}

.img{
    background: red;
}

.img:hover{
    opacity: 0.4;    
}

.img:hover .info{
    display: block;
}

演示。http://jsfidle.net/upwv3/

Answer 1

您需要使用相邻同级选择器

.img:hover + .title {
    bottom: 50px;
}

演示

这将移动具有.title的元素，该元素在具有.img的悬停元素上与.img相邻

Answer 2

使用此更改.title的位置：

.box:hover .title {
    bottom: auto;
    top: 10px;
}

并将其变为可见隐藏的.info框：

.box:hover .info {
    display: block;
}

以下是结果:http://jsfidle.net/upwv3/8/