Показывать элементы над каруселью

У меня есть карусель, использующая owlCarousel, и я пытаюсь заставить элементы карусели расширяться при наведении курсора. То, как это реализовано, по умолчанию просто displayed: none, а затем при наведении курсора отображается для блокировки. Ничего фантастического.

Это исключено из потока за счет абсолютного позиционирования, таким образом, карусель не будет расширяться при наведении курсора.

Проблема в том, что когда элемент зависает, детали, развернутый элемент не отображаются. Я попытался установить высокое значение z-index, но, похоже, это не решило проблему. Вот код:

CodePen файл

$('.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>

javascript jquery html owl-carousel owl-carousel-2

27.12.2018 23:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

400

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете попробовать не указывать верхнее значение, а вместо этого использовать высоту авто для .details.

$('.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;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
    height: auto;
}

<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>

Хороший ответ, но я хочу, чтобы желтый тоже отображался, а розовый - прямо под желтым.

— 28.12.2018 00:00

27.12.2018 23:58

Ответ принят как подходящий

Посмотрите, сработает ли это для вас:

Установите .owl-carousel .item на ваш content height + detail height (я использовал 200 пикселей)
Установите 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>

Спасибо!!!!!! Отличный ответ! Не знаю, как вы это придумали! Вы можете просто объяснить мне, что такое маржа?

— 28.12.2018 01:05

это для того, чтобы вернуть элементы управления навигацией туда, где они были бы без дополнительной высоты элемента

— 28.12.2018 01:07

28.12.2018 00:46