On hover OwlCarousel how to show the nav?

Question

I'm trying to get the nav to show only when the carousel is hovered but not sure how to approach this. Should I be using a visibility toggle?

EDIT

http://jsfiddle.net/TWtwt/470/

.owl-theme .owl-controls .owl-nav [class*=owl-] {
  color: #fff;
  font-size: 14px;
  font-family: 'KeplerStd-Regular';
  display: block;
  cursor: e-resize;
}

.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
  background-color: #1f1f1f;
  transition: 0.5s all;
  cursor: e-resize
}

@DinoMyte I still see the nav though even when the mouse isn't hovered ontop of the carousel. — user2252219, Jan 12 '16 at 22:19
@DinoMyte Maybe I'm not making myself clear enough. I added a pic to OP to hopefully clear it up. Here is an example of when you hover a carousel and the nav appears. http://andrewgooch.com/year-of-svu-franchise — user2252219, Jan 12 '16 at 22:24

score 1 · Accepted Answer · answered Jan 13 '16 at 00:31

You just need to change the opacity of owl-prev and owl-next to 0 in your CSS code, like this:

.owl-prev, .owl-next {opacity: 0 !important;}

Then, you can define hover action on owl-carousel to show/hide it as follows:

.owl-carousel:hover .owl-controls .owl-buttons .owl-prev {opacity: 1 !important;}
.owl-carousel:hover .owl-controls .owl-buttons .owl-next {opacity: 1 !important;}

Check out working example HERE

On hover OwlCarousel how to show the nav?

1 Answers1