1

将鼠标悬停在 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>

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/

4

4 回答 4

3

使用它来改变 的位置.title：

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

这可以打开可见的隐藏.info框：

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

这是结果：http: //jsfiddle.net/UPwv3/8/

于 2013-09-13T10:38:51.133 回答
2

你需要使用adjacent sibling selector

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

演示

这将移动与悬停元素.title相邻的元素.img.img

于 2013-09-13T10:44:58.557 回答
1

让你的课

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

工作，“信息”应该是“图像”的嵌套元素。看看下面的小提琴

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

于 2013-09-13T10:51:46.200 回答
1

试试这个代码

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

}
.box:hover .title {
    bottom: auto;
    top: 50px;
}
于 2013-09-13T10:40:19.577 回答