0

I am using owl carousel and trying to modify the .owl-nav buttons so that they appear on the sides of the carousel only if a user is hovering over the slider. I've written the following CSS but the problem is that .owl-nav is blocking the slider items and preventing users from clicking on them. Is there a way for me to move .owl-nav behind .owl-staging-outer while still being able to show the nav menu items only when the user hovers over the slider?

.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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Blake Bell
  • 376
  • 5
  • 16

1 Answers1

1

Don't set any z-index for owl-stage-outer and simply adjust the z-index of the other elements:

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thank you. My laptop charger just went kaput, but I'll try it out when I get a new one in. – Blake Bell Oct 31 '19 at 14:44
  • It's my fault for changing the demonstration code, but in my real world example `.owl-stage-outer` doesn't use flex and your code seems to only work with flex. How can I make this work when it's set to `display: block`? – Blake Bell Nov 05 '19 at 17:40
  • Here's a re-post of this question, maybe you can explain why this happens? https://stackoverflow.com/questions/58717315/owl-carousel-navigation-arrows-only-on-hover-a-z-index-issue – Blake Bell Nov 05 '19 at 18:26
  • @BlakeBell add position:relative to `.owl-stage-outer > *` and it will also work without flex – Temani Afif Nov 05 '19 at 18:35
  • Thank you! That works.. I know this one is probably pushing it, but is there a way to keep the .owl-nav hover effect active even when the link is being hovered over? I notice the arrows dissapear when I hover over the link and with the slider aspect of it this whole section is basically going to be a group of huge links; meaning it could be hard for the user to click the arrows when moving their mouse above the slider items. – Blake Bell Nov 05 '19 at 19:00
  • @BlakeBell add `.owl-stage-outer:hover ~ .owl-stage-outer > *{visibility: visible;}` – Temani Afif Nov 05 '19 at 19:03
  • Thank you very much, you have been a huge help. I also read through a Stacking Context article so this makes way more sense now. – Blake Bell Nov 05 '19 at 19:09
  • @BlakeBell I have also written a detailed answer about z-index trick if you want to understand more: https://stackoverflow.com/a/54903621/8620333 .. stacking context alone may not be enough – Temani Afif Nov 05 '19 at 19:11
  • I just wanted to add another note. When I changed `.owl-stage-outer > *` (the link) to `display: block;` and moved the padding and width to the link, it was clear that the link was still above everything. However, removing the z-index's and positioning from the parent block seems to have 'taken them out of the equation' and when I applied the z-index and positioning to strictly the children, everything seems to work. `.owl-next` and `.owl-prev` are positioned absolute, but since `.wrapper` in this case is `position: relative` the arrows were still contained within the slider and all is good. – Blake Bell Nov 06 '19 at 19:49