How to get arrows appear on carousel only on hover


Tags: css,hover,carousel,owl-carousel

Problem :

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;
}


Solution :

Try to remove all opacity properties and use this CSS:

.owl-buttons {
  display: none;
}

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

For example: http://codepen.io/glebkema/pen/GqbWYd

$(document).ready(function() {
 
  $("#owl-example").owlCarousel({
      itemsDesktop : [1499,4],
      itemsDesktopSmall : [1199,3],
      itemsTablet : [899,2],
      itemsMobile : [599,1],
      navigation : true,
      navigationText : ['<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-left fa-stack-1x fa-inverse"></i></span>','<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-right fa-stack-1x fa-inverse"></i></span>'],
  });
  
});
@import url('https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

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

.owl-item {
  text-align: center;
}

.owl-theme .owl-controls .owl-buttons div {
  background: transparent;
  color: #869791;
  font-size: 40px;
  line-height: 300px;
  margin: 0;
  padding: 0 60px;
  position: absolute;
  top: 0;
}
.owl-theme .owl-controls .owl-buttons .owl-prev {
  left: 0;
  padding-left: 20px;
}
.owl-theme .owl-controls .owl-buttons .owl-next {
  right: 0;
  padding-right: 20px;
}
<div id="owl-example" class="owl-carousel">
  <div><img src="//placehold.it/300x300/936/c69/?text=1" alt=""></div>
  <div><img src="//placehold.it/300x300/693/9c6/?text=2" alt=""></div>
  <div><img src="//placehold.it/300x300/369/69c/?text=3" alt=""></div>
  <div><img src="//placehold.it/300x300/c33/f66/?text=4" alt=""></div>
  <div><img src="//placehold.it/300x300/099/3cc/?text=5" alt=""></div>
  <div><img src="//placehold.it/300x300/f93/fc6/?text=6" alt=""></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>


    CSS Howto..

    How to put a background image on a site

    How to do img validation

    How to reset default button style in Firefox 4 +

    How to change color of selection in Select2 4.0.1?

    How to create inheritance with LESS?

    How to show mixed html and css with angularJS

    How can I set CSS only for specific IE browsers?

    How do I change my link's image on click?

    How to access this children div

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    How to show scrollbar when the inner content is aligned to bottom?

    HTML CSS - How to render SQL nicely [closed]

    How to show the first N elements of a block and hide the others in css?

    Prevent div from showing after slideUp() - jQuery

    How to get hyperlinks inside a “pop-up” term reference on mouse-over, and seperate the HTML term from the “pop-up” reference content

    text-rendering in css, what is it? and how to use it?

    How to select part of a custom element with CSS?

    How is Facebook's website front-end and it's right sidebar designed?

    • centered, not moving down.. unsure why / how to fix

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    How to fade out and fade in the divs sequentially

    How does Mashable.com displays/hides an element through Css?

    JQuery - show/hide rows and manipulate css

    How to add CSS style to focused anchor in HTML

    How to select a certain element in CSS by numerical position

    CSS Selectors - How to apply a defined class on the selector's event

    How to align text and image in a CSS box?

    How not to override property in CSS

    How to make responsive text that isn't too large or too small

    How to add a new CSS class to a Link Badge if the value is 0?