Z-Index a Div (0) за родным братом (1), оставляя детей выше (2) |Навигационные стрелки OwlCarousel только при наведении - PullRequest
Новая
       33

Z-Index a Div (0) за родным братом (1), оставляя детей выше (2) |Навигационные стрелки OwlCarousel только при наведении

0 голосов
/ 31 октября 2019

Я использую совую карусель и пытаюсь изменить кнопки .owl-nav так, чтобы они появлялись по бокам карусели только в том случае, если пользователь наводит курсор на ползунок. Я написал следующий CSS, но проблема в том, что .owl-nav блокирует элементы слайдера и не дает пользователям нажимать на них. Есть ли способ для меня переместиться на .owl-nav за .owl-staging-outer, при этом все еще показывая элементы навигационного меню, только когда пользователь наводит курсор на слайдер? 

.wrapper {
  position: relative;
}

.owl-nav {
    z-index: 0;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.owl-next, .owl-prev {
    z-index: 100;
    position: absolute;
    width: 40px;
    height: 100px;
    display: inline-block;
    background: #000;
    top: 25%;
}

.owl-stage-outer {
	background: #f4f4f4;
	width: 100%;
	height: 200px;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 0;
}

.owl-next {
    right: 0;
    content: ">";
    color: #fff;
    font-size: 2em;
}

.owl-prev {
    left: 0;
    content:  "<";
    color: #fff;
    font-size: 2em;
}

.owl-nav .owl-next,
.owl-nav .owl-prev {
    visibility: hidden;
}

.owl-nav:hover .owl-next,
.owl-nav:hover .owl-prev {
    visibility: visible;
}
<div class="wrapper">
  <div class="owl-stage-outer"><a href="#">I want to be clicked!</a></div>
<div class="owl-nav">
  <button type="button" role="presentation" class="owl-prev disabled">
    <span aria-label="Previous">‹</span>
  </button>
  <button type="button" role="presentation" class="owl-next">
    <span aria-label="Next">›</span>
  </button>
</div>
</div>

1 Ответ

1 голос
/ 31 октября 2019

Не устанавливайте z-индекс для owl-stage-outer, а просто настройте z-индекс других элементов: 

.wrapper {
  position: relative;
}

.owl-nav {
    z-index: 0;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.owl-next, .owl-prev {
    z-index: 100;
    position: absolute;
    width: 40px;
    height: 100px;
    display: inline-block;
    background: #000;
    top: 25%;
}

.owl-stage-outer {
	background: #f4f4f4;
	width: 100%;
	height: 200px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.owl-stage-outer > * {
  z-index:1;
}

.owl-next {
    right: 0;
    content: ">";
    color: #fff;
    font-size: 2em;
}

.owl-prev {
    left: 0;
    content:  "<";
    color: #fff;
    font-size: 2em;
}

.owl-nav .owl-next,
.owl-nav .owl-prev {
    visibility: hidden;
}

.owl-nav:hover .owl-next,
.owl-nav:hover .owl-prev {
    visibility: visible;
}
<div class="wrapper">
  <div class="owl-stage-outer"><a href="#">I want to be clicked!</a></div>
<div class="owl-nav">
  <button type="button" role="presentation" class="owl-prev disabled">
    <span aria-label="Previous">‹</span>
  </button>
  <button type="button" role="presentation" class="owl-next">
    <span aria-label="Next">›</span>
  </button>
</div>
</div>
...