Question

当我将鼠标悬停在div上时，我想改变2个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://jsfiddle.net/UPwv3/

Answer 1

使用此选项更改.title的位置：

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

这样可以将隐藏的.info框隐藏起来：

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

结果如下：http://jsfiddle.net/UPwv3/8/

Answer 2

您需要使用adjacent sibling selector

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

Demo

这将移动.title与.img相邻的元素，该元素位于具有.img

的悬停元素上

Answer 3

试用此代码

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

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

Answer 4

制作课程

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

工作，'info'应该是'image'的嵌套元素。看看下面的小提琴

http://jsfiddle.net/pY9jx/3/

在悬停时使用CSS更改div位置

4 个答案: