Question

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

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设置为类。

将文字显示在另一行的框下方：悬停？

1 个答案: