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 - 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 {

.owl-prev {
  opacity: 0 !important;

.owl-next {
  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;

.owl-theme .owl-controls .owl-buttons div:hover {
  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:

$(document).ready(function() {
      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('');
@import url('');
@import url('');

.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="//" alt=""></div>
  <div><img src="//" alt=""></div>
  <div><img src="//" alt=""></div>
  <div><img src="//" alt=""></div>
  <div><img src="//" alt=""></div>
  <div><img src="//" alt=""></div>

<script src=""></script>
<script src=""></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 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?