使元素显示在转盘上方

时间：2018-12-27 22:23:48

标签： javascript jquery html owl-carousel owl-carousel-2

我有一个使用owlCarousel的轮播，并且我正在尝试使轮播中的元素在悬停时扩展。它的实现方式是默认情况下仅为displayed: none，然后在悬停时将其显示为阻止状态。没什么。

通过绝对定位将其从流中移出，这样轮播将不会在元素悬停时扩展。

问题是，当悬停元素时，展开的元素的详细信息不显示。我尝试给它一个高z-index，但似乎无法解决问题。这是代码：

CodePen FIle 

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
  background-color: pink;
  height: 300px;
  position: absolute;
  top: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  z-index: 20;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>1</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

2 个答案:

答案 0 :(得分：1)

看看这是否对您有用：

  1. 将.owl-carousel .item设置为您的content height + detail height（我使用了200px）

  2. 将margin-top中的.owl-carousel.owl-theme .owl-nav设置为-(detail height) + 10px（最初是10px）

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item {
  height: 200px;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
  background-color: pink;
  height: 100px;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
}

.owl-carousel.owl-theme .owl-nav {
  margin-top: -90px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>1</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

答案 1 :(得分：0)

您可以尝试不给出最高值，而是将{@ {1}}的自动高度设为

$(inherited)
declare @g geometry = geometry::STGeomFromText('
    MULTIPOLYGON (
        ((40 40, 20 45, 45 30, 40 40)), 
        ((20 35, 10 30, 10 10, 30 5, 45 20, 20 35), (30 20, 20 15, 20 25, 30 20))
    )', 0);

select @g.STGeometryN(n.n).ToString()
from dbo.Numbers as n
where n <= @g.STNumGeometries();

.details

相关问题
最新问题