user6738171 user6738171 - 3 months ago 37
CSS Question

How to get arrows appear on carousel only on hover

For my wordpress theme I'm building I added the owl carousel. I was able to get the navigation appear how I want. Arrows on the side of the carousel.

But now my problem is that I want the arrows to only appear when you hover over the carousel. ( An example is http://www.whowhatwear.com - the squares)

I was able to get the arrows to show when you hover over one spot on the carousel, but I want them to show when you scroll anywhere over the carousel. Does anyone have a solution?

Here is my css

/* Navigation */
.owl-prev, .owl-next {
position:absolute;
top:50%;
padding:5px;
margin:0;
z-index:100;
font-size:3rem;
cursor:pointer;
color:#000000;
}

.owl-prev {
left:-10px;
opacity: 0 !important;
}

.owl-next {
right:-10px;
opacity: 0 !important;
}

.owl-theme .owl-controls .owl-buttons div{
color: #555;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
font-size: 3rem;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background: transparent;
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
margin-top:-32px;
}

.owl-theme .owl-controls .owl-buttons div:hover {
color:#000000;
opacity: 1 !important;
}

Answer

Try to remove all opacity properties and use this CSS:

.owl-buttons {
  display: none;
}

.owl-carousel:hover .owl-buttons {
  display: block;
}