Question

我有一个div，其中包含有关视频的信息，该视频仅在视频div容器悬停时显示。 8个视频在下一行8个视频之前排成一行。该行的第一个和最后一个视频存在一个问题，即悬停时显示的div不在屏幕上，如示例图像中所示。

我想得到以下结果：

我想要的结果类似于在这个电影网站yesmovies上看到的悬停描述框

mov.html

 //first instance
<div id="move-item">//on hover shows middle div
<div></div>
<div></div>
<div class="mov_item">
<div class="middle">//hidden with css
<div></div>
<div></div>
<div></div>
</div>
</div>

</div>

//second instance
<div id="move-item">//on hover shows middle div
<div></div>
<div></div>
<div class="mov_item">
<div class="middle">//hidden with css
<div></div>
<div></div>
<div></div>
</div>
</div>

</div>
.................
//eight instance
<div id="move-item">//on hover shows middle div
<div></div>
<div></div>
<div class="mov_item">
<div class="middle">//hidden with css
<div></div>
<div></div>
<div></div>
</div>
</div>

</div>

CSS

     .mov_item {

     position: relative;
     float: left;
     margin-left: 40px;

        }
     #item{
     width: calc(100% - 4px);
             }
     .mov_item a {
      font-size: 16px; 
       display: inline-block;
       margin-bottom: 8px;
       width: calc(50% - 4px);


          }

     .mov_item a:nth-of-type(2n) {
      margin-right: 0;
              }

      @media screen and (min-width: 50em) {
       .mov_item a {
       width: calc(25% - 6px);
                }

         .mov_item a:nth-of-type(2n) {
         margin-right: 8px;
                }

     .mov_item a:nth-of-type(4n) {
        margin-right: 0;
                   }
                        }
            .mov_item{

            margin-bottom: 30px;
           }
     /********description box wrapper**********/
       .middle {
        transition: .5s ease;
         visibility: hidden;
          position: absolute;
        display: block;
       transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);

     display: inline-grid;
     border-top: solid 1px #ff1111;


         }

      .mov_item:hover .image {
      opacity: 0.2;
              }

     .mov_item:hover .middle {
      visibility: visible;
      z-index: 3;
              }
     .text1 {
      color: #fff;
      font-size: 12px;
       padding: 16px 32px;
       font-weight: bold;
       margin-top: -60px;
       margin-left: -20px;
       width: 180px;
       font-weight: bolder;
            }

   .play_mid{
         transition: .5s ease;
          opacity: 0;
         position: absolute;
         transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         z-index: 1;
         margin-top: -85px;
         margin-left: 60px;
         text-decoration: none;
                }

        .mov_item:hover .play_mid {
        opacity: 1;

             }

        .mov_item:hover .text1{

         opacity: 0;
                       }

如何在第二张图像上实现设计结果或类似于链接

Answer 1

我可以看到，你正在使用nth-child所以你只需要为每个第一个元素和每一个元素都需要正确的公式。例如，对于行中的每个第8个元素，可以使用:nth-child(8n)作为不同的css。因此，如果它是第8个“描述框”，只需更改该框的位置即可。我没有看到问题。

我同意Alon Eitan ...如果您想要更准确的答案，并且为了本网站的法规和用户的目的，我们需要编辑以保持问题和答案清晰。

修改

正如我们下面的对话扩展，让我们解释一下。我的错误......没有:nth-of-class这样的东西，而:nth-of-child或:nth-of-type对所有孩子都有效，所以对此的肮脏解决办法就是将孩子的css覆盖到正常状态。

我将在下面的示例中使用:nth-of-type代替:nth-child：

#container div:nth-of-type(1){ // our div here is #move-item background: yellow; color: red; } #container div div { background: white!important; color: black!important; }

我们更改第一级div的第一个元素，然后我们将第二级标准化

我们完成这个小提琴 http://jsfiddle.net/w1Lqwzqu/5/

智能div，如果在屏幕的左端，则向右移动div，反之亦然

1 个答案: