Question

我试图在项目div（猫头鹰轮播）中显示具有绝对位置的div。但没有工作。

＆＃13;

$("#owl-demo").owlCarousel({pagination:false});

＆＃13;

body{height:500px}

#owl-demo .item{
  background: #3fbf79;
  padding:10px;
  margin:0px 10px;
  position:relative;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#owl-demo .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:block;
  padding:10px;
  background:red;
}

#no-owl{margin-top:30px}

#no-owl .item{
  background: #3fbf79;
  padding:10px;
  width:45%;
  position:relative;
  display:inline-block;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#no-owl .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:block;
  padding:10px;
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>

<body>
<div>Owl carousel</div>
<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
  <div class="item">
    <h1>3</h1>
    <div class="show">Item 3</div>
  </div>
  <div class="item">
    <h1>4</h1>
    <div class="show">Item 4</div>
  </div>
</div>



<div id="no-owl">
  <div>No carousel</div>
<div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
</div>
  </body>

＆＃13;

如何在不添加轮播高度的情况下显示绝对内容：https://jsfiddle.net/Ljz7c8fg/1/

Answer 1

您需要设置：

bottom: 0px;

在：

#no-owl .show

Answer 2

问题是由“.owl-carousel .owl-wrapper-outer”中的“overflow：hidden”引起的。如果给它一个高度，问题就会解决（但我认为高度应该自动计算，我的意思是轮播的高度应该等于最高的轮播项目。）。你可以使用Javascript来解决问题吗？

Answer 3

＆＃13;

$("#owl-demo").owlCarousel({pagination:false});

$("#owl-demo .item, #no-owl .item").hover(function(){
    $(this).find('.show').show();
    }, function(){
    $(this).find('.show').hide();
});

＆＃13;

body{overflow-x:hidden !important;height:500px}
#owl-demo .item{
  background: #3fbf79;
  padding:10px;
  margin:0px 10px;
  position:relative;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#owl-demo .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:none;
  padding:10px;
  background:red;
}

#no-owl{
   padding:30px;
   display:block;
   background:blue;
   color:white
}

.owl-carousel .owl-stage-outer {position:relative !important;overflow:hidden !important}

.owl-carousel .owl-wrapper-outer {width:100% !important;position:relative !important;overflow:visible !important}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>

<body>

<div id="no-owl">
Some Content
</div>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
  <div class="item">
    <h1>3</h1>
    <div class="show">Item 3</div>
  </div>
  <div class="item">
    <h1>4</h1>
    <div class="show">Item 4</div>
  </div>
</div>



<div id="no-owl">
Some Content
</div>

</body>

＆＃13;

猫头鹰轮播项目绝对位置

3 个答案: