У меня есть карусель, использующая 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>