html - 使文本出现在 :hover? 上另一行的框下方

Question

我有一排盒子，其中包含如下技能: https://jsfiddle.net/7115213d/1/我遇到的问题是，当您将鼠标悬停在每个文本上方时，文本会停留在一个位置并将其他框移动到其下方，我已尝试将其更改为内联 block ，但仍然搞砸了。我想把它放在当你将鼠标悬停在每个单独的框上时，文本 block 出现在它下面的中心的新行中，我确实尝试过这个但是一旦你将“测试消息”放到新行。有谁知道如何解决或改进它？我正在使用由单独的行和列组成的骨架框架。我到处都看过，似乎找不到解决方案，所以任何帮助都会很棒。谢谢

HTML:

        <div class="row">
                <div class="skill">
                    <div class="twelve columns">

                        <div id="skillimage">
                            <div class="box hvr-float">
                                <h1 class="php">PHP</h1>
                            </div>
                        </div>
                        <div id="hover">Test message</div>

                        <div id="skillimage">
                            <div class="box hvr-float">
                                <h1 class="css">CSS</h1>
                            </div>
                        </div>
                        <div id="hover">Test message</div>

                        <div id="skillimage">
                            <div class="box hvr-float">
                                <h1 class="html">HTML</h1>
                            </div>
                        </div>
                        <div id="hover">Test message</div>

                        <div id="skillimage">
                            <div class="box hvr-float">
                                <h1 class="photoshop">PS</h1>
                            </div>
                        </div>
                        <div id="hover">Test message</div>

                        <div id="skillimage">
                            <div class="box hvr-float">
                                <h1 class="js">JS</h1>
                            </div>
                        </div>
                        <div id="hover">Test message</div>



                            <div class="box hvr-float">
                                <h1 class="sql">SQL</h1>
                            </div> 
                            <div class="box hvr-float">
                                <h1 class="sass">SASS</h1>
                            </div> 
                    </div>
                </div>
          </div>

CSS

 .box {
     display: inline-block;
     background-color: #424242;
     border-radius: 50px;
     height: 100px;
     width: 100px;
     margin: 14px;
 }
 .php {
     position: relative;
     top: 30px;
     padding: 0 10px;
     color: white;
     font-family: 'Montserrat', sans-serif;
     font-size: 30px;
     text-align: center;
 }
 .html {
     position: relative;
     top: 30px;
     color: white;
     font-family: 'Montserrat', sans-serif;
     font-size: 30px;
     text-align: center;
 }
 .css {
     position: relative;
     top: 30px;
     color: white;
     font-family: 'Montserrat', sans-serif;
     font-size: 30px;
     text-align: center;
 }
 .js {
     position: relative;
     top: 30px;
     color: white;
     font-family: 'Montserrat', sans-serif;
     font-size: 30px;
     text-align: center;
 }
 .photoshop {
     position: relative;
     top: 30px;
     color: white;
     font-family: 'Montserrat', sans-serif;
     font-size: 30px;
     text-align: center;
 }
 .sass {
     position: relative;
     top: 30px;
     color: white;
     font-family: 'Montserrat', sans-serif;
     font-size: 30px;
     text-align: center;
 }
 .sql {
     position: relative;
     top: 30px;
     color: white;
     font-family: 'Montserrat', sans-serif;
     font-size: 30px;
     text-align: center;
 }
 #skillimage {
     display: inline-block;
 }
 #hover {
     display: none;
 }
 #skillimage:hover + #hover {
     display: block;
 }

Answer 1

你可以像这样将 hover div 放在 skillimage 中来解决这个问题

.box{
        display:inline-block;
        background-color:#424242;
        border-radius:50px; 
        height:100px;
        width:100px;
        margin:14px;
}
    .php{
        position: relative;
        top: 30px;
        padding: 0 10px;
        color:white;
        font-family: 'Montserrat', sans-serif;
        font-size: 30px;
        text-align:center;
    }
    .html{
        position: relative;
        top: 30px;
       color:white;
        font-family: 'Montserrat', sans-serif;
        font-size: 30px;
        text-align:center;
    }
    .css{
        position: relative;
        top: 30px;
       color:white;
        font-family: 'Montserrat', sans-serif;
        font-size: 30px;
        text-align:center;
    }
    .js{
        position: relative;
        top: 30px;
        color:white;
        font-family: 'Montserrat', sans-serif;
        font-size: 30px;
        text-align:center;
    }
    .photoshop{
        position: relative;
        top: 30px;
        color:white;
        font-family: 'Montserrat', sans-serif;
        font-size: 30px;
        text-align:center;
    }

.skillimage{
    display:inline-block;
    vertical-align: top;
}

.hover {
    display: none;
}

.skillimage:hover  .hover {
    display: block;
  
}

<div class="row">
             <div class="skill">
                        <div class="twelve columns">
                            <div class="skillimage">
                                <div class="box hvr-float">
                                    <h1 class="php">PHP</h1>
                                </div>
                                <div class="hover">Test message</div>
                            </div>
                            
                            
                            <div class="skillimage">
                                <div class="box hvr-float">
                                    <h1 class="css">CSS</h1>
                                </div>
                                <div class="hover">Test message</div>
                            </div>
                            
                            <div class="skillimage">
                                <div class="box hvr-float">
                                    <h1 class="html">HTML</h1>
                                </div>
                                <div class="hover">Test message</div>
                            </div>
                            
                            <div class="skillimage">
                                <div class="box hvr-float">
                                    <h1 class="photoshop">PS</h1>
                                </div>
                                <div class="hover">Test message</div>
                            </div>
                            
                            <div class="skillimage">
                                <div class="box hvr-float">
                                    <h1 class="js">JS</h1>
                                </div>
                                <div class="hover">Test message</div>
                            </div>
                        </div>
                    </div>
              </div>

此外，请记住 id 在 DOM 树中必须是唯一的，因此您必须将 hover 和 skillimage 设置为类。