Question

在猫头鹰旋转木马中，我的绝对元素（放置在旋转木马项目中）有一个问题，即'disciription'类，它位于下一个项目的后面，几乎没有办法让它自己前进，所以希望你能帮助我。

我想要的镜头：

<div class="owl-carousel topfeatured">
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description">
    </div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>
<div class="item">
    <div class="thumb" style="background-image: linear-gradient(-60deg, #fff 0%, rgba(255, 255, 255, 0) 100%), url(https://tinys.club/wp-content/uploads/2017/07/1343232_mkt-pm_got_s7_jon_po.jpg);"></div>
    <div class="description"></div>
</div>

.topfeatured {
    overflow: hidden;
    height: 400px;
}
.topfeatured .item {
    position: relative;
    height: 400px;
}
.topfeatured .item .thumb {
    position: relative;
    width: 100%;
    height: 400px;
    bottom: 0;
    transition: 0.8s ease-in-out all;
}
.topfeatured .item .description {
    width: 100%;
    padding: 10px 30px;
    height: 150px;
    position: absolute;
    background: #263238;
    bottom: -170px;
    right: -30px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
    transition: 1s ease-in-out;
}
.topfeatured .item:hover .description {
    bottom: 0;
    transition: 0.8s ease-in-out;
}
.topfeatured .item:hover .thumb {
    bottom: 80px;
}

这里是小提琴：http://jsfiddle.net/4653f7xk/3/

Answer 1

未更新问题的答案

只需删除showLoader即可。这是工作小提琴：

http://jsfiddle.net/4653f7xk/4/

Answer 2

将此类添加到css中，以便为活动幻灯片提供比非活动幻灯片更高的z-index。

.owl-item.active {
  z-index: 20;
}

然后给.description类提供以下属性：

.topfeatured .item .description {
    width: calc(100% + 100px);
    padding: 10px 30px;
    height: 150px;
    position: absolute;
    background: #263238;
    bottom: -170px;
    right: -50px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
    transition: 1s ease-in-out;
}

http://jsfiddle.net/4653f7xk/10/

轮播项目中的绝对元素属于下一个项目

2 个答案:

未更新问题的答案