Html 在CSS处于悬停状态时更改div位置

我想在将鼠标悬停在某个div上时更改2个div的位置。在下面的代码中，当我将鼠标悬停在.img div上时，我想将.title div移动到顶部（例如位置：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>

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;
}

演示。

---

使用此选项更改

的位置。标题
：

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

这将打开可见隐藏
.info
框：

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

结果如下：
使用此选项更改
的位置。title
：

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

这将打开可见隐藏
.info
框：

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

下面是结果：
试试这段代码

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

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

试试这个代码

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

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

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

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


这将在悬停具有
.img
的元素上移动与
.img
相邻的具有
.title
的元素。img
您需要使用
相邻同级选择器

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


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

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

work，“info”应该是“image”的嵌套元素。看看下面的小提琴

让你的课

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

work，“info”应该是“image”的嵌套元素。看看下面的小提琴

类似这样的东西非常感谢。但是，当您将图像悬停并将光标移动到标题或描述上时，会显示背景不透明度效果，请检查一下。非常感谢。@user2738640在
.box
悬停时触发它
.box:hover.img{opacity:0.4；}
。演示：@deathlock非常感谢。非常感谢。但是，当您将图像悬停并将光标移动到标题或描述上时，会显示背景不透明度效果，请检查一下。非常感谢。@user2738640在
.box
悬停时触发它
.box:hover.img{opacity:0.4；}
。演示：@deathlock非常感谢。