Question

我为酒店建了一个网站。剩下的就是最后一部分。

我想要的最后一部分包含三个图像;在悬停时，他们向下滑动以在下方显示文字<div>。一切都有效，除了将图像放在文本顶部以隐藏它们。

JS Fiddle 并简化一点：

Page Parent Div; 
then a div to contain the texts;
and three text divs;

new Div to contain all three imgs;
then each img in seperate divs;

如果你们对我的代码有任何注意事项我都是耳朵，特别是在水平列表对齐方面，而且只是注释，

当有人在我的网站上调整浏览器窗口大小时，如何控制<div>的灵活性？

Answer 1

我在完全理解你的要求时遇到了一些麻烦，因此我将这个问题解释为三个图像;在悬停时，他们向下滑动以显示文字<div>位于＆＃34;。

之下

我接近这个的方法是将两个div（文本和图像）放在另一个容器div中。

<div class="itemContainer">
    <div class="itemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse facilisis augue vel purus fermentum, quis accumsan urna accumsan.
    </div>
    <div class="itemImage">
        <img src = "287.jpg" width="300px" height="200px">
    </div>
</div>

使用CSS过渡使用顶部样式属性向下移动文本div的高度。

<style type="text/css">
div.itemContainer
{
    border: 1px solid rgb(0,0,0);
    width:300px;
    height:200px;
    position:relative;
    background-color:rgb(255,255,255);
}    

div.itemText
{
    height:200px;
    width:300px;
}

div.itemImage
{
    height: 200px;
    width: 200px;
    position:absolute;
    top: 0;
    -webkit-transition: top 1s;
    transition: top 1s;
}

div.itemContainer:hover > div.itemImage
{
    top: 200px;
}
</style>

JSFiddle of code in action：https://jsfiddle.net/p2xkLaku/

您需要在

的top属性中设置容器的高度

div.itemContainer:hover > div.itemImage

您可以将其设置为使用JavaScript自动调整。

要更改转换发生的时间，请更改以下行中的1s值。

-webkit-transition: top 1s;
transition: top 1s;

在文本div上叠加img div

1 个答案: