CODEWITHSUNDEEP
javascriptphphtmlcss
Torsten
Torsten

Reputation: 91

How to hide arrows that following the cursor on mouseover a button or link

I have a slider with slider controls left and right that are arrows and following the cursor. Those are replacing the standard nav of the revolution slider. That all looks great until I hover over a content button and then the hover function does not wor properly anymore. So I want to hide the arrows when hovering over those buttons.

I tried with CSS display:none or background:none but that didn't work:

.tp-leftarrow a:hover, .tp-rightarrow a:hover {
  background: none !important;
  display:none;
}

I'm sure it needs to be done with JS but my JS skills are really not up to speed currently.

CSS:

.rev_slider.interactive-arrows {cursor: none}
.rev_slider.interactive-arrows .rs-layer[data-actions] {cursor: pointer}
.rev_slider.interactive-arrows .tp-videolayer {cursor: auto}

.interactive-arrows .tparrows {

  cursor: none; 
  visibility: hidden;
  pointer-events: none;
  transform: none !important; 
  transition: none !important;

}

.tp-leftarrow:before {
/*content: "\23"  !important; */
  color: #000;

  content: "" !important;

  background: url(/wp-content/themes/bridge/css/img/slider-left-normal.png);
  color: #000;
    width:60px;
  height:39px;  
}


.tp-rightarrow:before {
/* content: "\24"  !important; */
  content: "" !important;

  background: url(/wp-content/themes/bridge/css/img/slider-right-normal.png);
  color: #000;
    width:60px;
  height:39px;

/*  filter: drop-shadow(0 0 5px #333); */
  font-size: 66px !important;

}

JS:

(function() {

    if('ontouchend' in document) return;

    // ***************************************************
    // replace the number "26" below with your slider's ID
    var api = revapi1.addClass('interactive-arrows');
    // ***************************************************

    var left,
        right,
        prevX,
        prevY,
        center,
        offset,
        arrowW,
        arrowH,
        entered,
        leftIsOn,
        rightIsOn,
        fromClick,
        nextSlide,
        navHovered;

    api.on('revolution.slide.onloaded', function() {

        left = api.find('.tp-leftarrow').off('click').css('visibility', 'visible').hide();
        right = api.find('.tp-rightarrow').off('click').css('visibility', 'visible').hide();

        arrowW = right.outerWidth(true) >> 1;
        arrowH = right.outerHeight(true) >> 1;

        api.on('mouseenter mouseleave mousemove click', function(e) {

            switch(e.type) {

                case 'mouseenter':

                    center = api.width() >> 1;
                    offset = api.offset();
                    entered = true;
                    updateArrows(e.pageX, e.pageY);

                break;

                case 'mouseleave':

                    entered = false;
                    leftIsOn = false;
                    rightIsOn = false;
                    right.hide();
                    left.hide();

                break;

                case 'mousemove':

                    if(!entered) api.trigger('mouseenter');
                    updateArrows(e.pageX, e.pageY);

                break;

                case 'click':

                    var $this = jQuery(this);

                    if(this.className.search(/tp-kbimg|tp-bgimg|rs-fullvideo-cover/) !== -1 ||
                      (this.tagName.toLowerCase() !== 'a' && !this.getAttribute('data-actions') && !$this.closest('.tp-videolayer').length)) {

                        fromClick = true;
                        api[nextSlide ? 'revnext' : 'revprev']();

                    }

                break;

            }

        }).on('revolution.slide.onbeforeswap', function(e) {

            if(fromClick) {

                fromClick = false;
                updateArrows(prevX, prevY);

            }

        }).find('.tp-bullets, .tp-tabs, .tp-thumbs, .rs-layer[data-actions], a.rs-layer, .tp-videolayer').on('mouseover mouseout click', function(e) {

            switch(e.type) {

                case 'mouseover':

                    navHovered = true;
                    right.hide();
                    left.hide();

                break;

                case 'mouseout':

                    navHovered = false;
                    updateArrows(e.pageX, e.pageY);

                break;

                case 'click':

                    e.stopPropagation();

                break;

            }

        });

    });

    function updateArrows(pageX, pageY) {

        if(navHovered) return;

        var posX = pageX - offset.left,
            posY = pageY - offset.top,
            arrow;

        if(posX > center) {

            arrow = right.show();
            nextSlide = true;
            left.hide();

        }
        else {

            arrow = left.show();
            nextSlide = false;
            right.hide();

        }

        arrow[0].style.left = (posX - arrowW) + 'px';
        arrow[0].style.top = (posY - arrowH) + 'px';

        prevX = pageX;
        prevY = pageY;

    }

})();

It is the revolution slider that does not work and I cannot figure it out why.

Thanks a lot for your help!

Upvotes: 1

Views: 2350

Answers (2)

Meysam maboudi
Meysam maboudi

Reputation: 156

found this on codepen 

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.cursor-icons {
  display: none;
}

.carousel-control {
  width: 50%;
}

.carousel .right:hover {
  cursor: url("http://johnuberbacher.com/projects/codepen/arrow-right.png"), default !important
}

.carousel .left:hover {
  cursor: url("http://johnuberbacher.com/projects/codepen/arrow-left.png"), default !important
}

.carousel-indicators li {
  border-radius: 3px;
  height: 13px;
  width: 13px;
  margin: 2px;
  font-weight: 800;
  border: 2px solid #fff;
}

.carousel-indicators .active {
  height: 17px;
  width: 17px;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <br>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <!-- Carousel Card -->
      <div class="card card-raised card-carousel">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <div class="carousel slide" data-ride="carousel">

            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
              <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item">
                <img src="http://johnuberbacher.com/projects/codepen/slideshow-1.jpg">
                <div class="carousel-caption">
                  <h4>Slideshow 1</h4>
                </div>
              </div>
              <div class="item active">
                <img src="http://johnuberbacher.com/projects/codepen/slideshow-2.jpg" alt="Awesome Image">
                <div class="carousel-caption">
                  <h4>Slideshow 2</h4>
                </div>
              </div>
              <div class="item">
                <img src="http://johnuberbacher.com/projects/codepen/slideshow-3.jpg" alt="Awesome Image">
                <div class="carousel-caption">
                  <h4>Slideshow 3</h4>
                </div>
              </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
              <i class="cursor-icons">keyboard_arrow_left</i>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
              <i class="cursor-icons">keyboard_arrow_right</i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- End Carousel Card -->

  </div>

Upvotes: 1

Some Guy
Some Guy

Reputation: 388

You can use JS or CSS:

document.getElementById("nocursor").style.cursor = "default"
.nocursor {
cursor: default
}
<a href="#" id="nocursor" class="nocursor">Hover Over me</a>
Tutorial: W3Schools

Upvotes: 0

Related Questions