Question

我试图在你悬停它时向上移动一个div并且到目前为止有效，但内部的

标签停留在同一个地方，我需要它与div一起移动。你有什么建议我能做到吗？
谢谢你的帮助！

这是我到目前为止写的：

css:

#probando img:hover {
            top:-90px;
            transition: top .30s;
        }

        #probando {
            left:0;
            right:0;
            position: absolute;
            z-index: 15;
            top:40.5em;
        }

        #probando img {
            max-width:280px;
            position:relative;
            top:-40px;
        }

html

<div class="container" id="probando">
                        <div class="sixteen columns">
                            <div class="five columns" id="foto" >

                                <p id="galerie">Über uns</p>

                                <a href="Ueberuns.html"><img src="../Img/ueberuns2.jpg" alt="Ueber uns" /></a>
                            </div>
                            <div class="five columns" id="foto">
                                <p id="ueber">Galerie</p> 
                                <a href="galerie.html"><img src="../Img/galerie.jpg" alt="Gallery"  /></a>
                            </div>
                            <div class="five columns" id="foto">
                                <p id="dj"> Djs</p>
                                <a href="Djs.html"><img src="../Img/dijcolor.jpg" alt="DJs"   /></a>
                            </div>
                        </div>
            </div>

Answer 1

如果我理解正确的话;您的转换仅在图片标记上，它没有子元素。如果将过渡移动到包含div，那么它将移动所有内容。

html：添加一个可以过渡的目标类。

<div class="container" id="probando">
                        <div class="sixteen columns">
                            <div class="five columns moveable" id="foto" >

                                <p id="galerie">Über uns</p>

                                <a href="Ueberuns.html"><img src="../Img/ueberuns2.jpg" alt="Ueber uns" /></a>
                            </div>
                            <div class="five columns moveable" id="foto">
                                <p id="ueber">Galerie</p> 
                                <a href="galerie.html"><img src="../Img/galerie.jpg" alt="Gallery"  /></a>
                            </div>
                            <div class="five columns moveable" id="foto">
                                <p id="dj"> Djs</p>
                                <a href="Djs.html"><img src="../Img/dijcolor.jpg" alt="DJs"   /></a>
                            </div>
                        </div>
            </div>

CSS：改为定位该类：

#probando .moveable:hover {
            top:-90px;
            transition: top .90s;
        }

        #probando {
            left:0;
            right:0;
            position: absolute;
            z-index: 15;
            top:10.5em;
        }

        #probando .moveable {
            max-width:280px;
            position:relative;
            top:-40px;
        }

https://jsfiddle.net/L12p8gj5/

您只需根据需要重新对齐元素。

悬停一个div并将其内容（<p>）向上移动

1 个答案: