Question

我有一个 div （悬停），它在悬停时与图像重叠，直到现在才能完美运行。在那个div中我有一个文本（标题）和另一个div（细节）。 .hover div的高度是可变的，我需要将details div放在父div（.hover）的底部，标题放在顶部。接下来是HTML结构：

<div class="grid-item">
        <img class="Movieimg" src="img.jpg">

        <div class="hover">
            <div class="title">The title</div>

            <div class="details pull-right">
                <a class="btn btn-danger btn-xs nzbdetails" href="" target="_self"  data-toggle="tooltip" data-placement="left" title="Details">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="" class="btn btn-primary btn-xs getnzb" data-toggle="tooltip" data-placement="right" title="Get NZB">
                    <i class="fa fa-download" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>

目前的CSS就是这个：

.grid-item img{
        width:150px;
    }
.grid-item {
        position:relative;
 }
 img:hover{
        cursor: pointer;
        cursor: hand;
        filter:blur(5px);
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 10px #ccc;
}

.grid-item .hover {
        display:none;
        position:absolute;
        bottom:0;
        width: 100%;
 }

 .details a{
        margin-bottom: 5px;
        margin-top: 80%;
 }

.grid-item:hover .hover {
    display:block;
    height: 100%;
}
 .title{
    text-align:center;
    width:calc(100% - 10px);
    position:absolute;
    left:5px;
}

另外，我正在使用 Bootstrap 3 ，所以也许有一个类来实现这个目标？

Answer 1

虽然你的问题对我来说并不是很清楚，但我认为这是你要实现的目标。我刚刚使用了bootstrap网格布局来获得正确的网格结构。我发现你的一些css是不必要的，所以删除这些块，因为你可以达到预期的效果而不使用css而不是bootstrap网格系统就足够了。

删除的css阻止

.title{
text-align:center;
width:calc(100% - 10px);
position:absolute;
left:5px;
}

 margin-top: 80%;
 .grid-item img{
    width:150px;// inserted class="img-responsive in place of it
}

工作代码段

＆＃13;

.grid-item {
        position:relative;
 }
 img:hover{
        cursor: pointer;
        cursor: hand;
        filter:blur(5px);
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 10px #ccc;
}

.grid-item .hover {
        display:none;
        position:absolute;
        bottom:0;
 }

 .details a{
        margin-bottom: 5px;
 }

.grid-item:hover .hover {
    display:block;
    height: 100%;
}
 /*.title{
    text-align:center;
    width:calc(100% - 10px);
    position:absolute;
    left:5px;
}*/

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           
          </head>
          <body>
          <div class="container-fluid">
          <div class="grid-item">
          <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        <img class="Movieimg img-responsive" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg">
        </div>

        <div class="hover col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-9 col-sm-offset-3 col-xs-9 col-xs-offset-3">
        <div class="row">
           <div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="title">The title</div>
            </div>
            </div>
            <div class="row">
            <div class="details col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <a class="btn btn-danger btn-xs nzbdetails" href="" target="_self"  data-toggle="tooltip" data-placement="left" title="Details">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="" class="btn btn-primary btn-xs getnzb" data-toggle="tooltip" data-placement="right" title="Get NZB">
                    <i class="fa fa-download" aria-hidden="true"></i>
                </a>
            </div>
            </div>
</div>
</div>

        </div>
    </div>
    </div>
  </body>
  </html>

＆＃13;

在父div的底部设置div

1 个答案: