如何在鼠标悬停在按钮或链接上时隐藏跟随光标的箭头

Question

我有一个滑块，左右滑块控件是箭头并跟随光标。这些正在取代旋转滑块的标准导航。一切看起来都很棒，直到我将鼠标悬停在内容按钮上，然后悬停功能不再正常工作。所以我想在悬停在这些按钮上时隐藏箭头。

我尝试使用 CSS display:none 或 background:none 但这没有用：

.tp-leftarrow a:hover, .tp-rightarrow a:hover {

  background: none !important;

  display:none;

}

我确定这需要用 JS 来完成，但我的 JS 技能目前确实跟不上速度。

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;

}

旋转滑块不起作用，我不知道为什么。

非常感谢你的帮助！

Answer 1

在codepen上找到了这个@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");.carousel-control.left,.carousel-control.right {&nbsp; background-image: none;}.cursor-icons {&nbsp; display: none;}.carousel-control {&nbsp; width: 50%;}.carousel .right:hover {&nbsp; cursor: url("http://johnuberbacher.com/projects/codepen/arrow-right.png"), default !important}.carousel .left:hover {&nbsp; cursor: url("http://johnuberbacher.com/projects/codepen/arrow-left.png"), default !important}.carousel-indicators li {&nbsp; border-radius: 3px;&nbsp; height: 13px;&nbsp; width: 13px;&nbsp; margin: 2px;&nbsp; font-weight: 800;&nbsp; border: 2px solid #fff;}.carousel-indicators .active {&nbsp; height: 17px;&nbsp; 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">&nbsp; <br>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-md-8 col-md-offset-2">&nbsp; &nbsp; &nbsp; <!-- Carousel Card -->&nbsp; &nbsp; &nbsp; <div class="card card-raised card-carousel">&nbsp; &nbsp; &nbsp; &nbsp; <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel slide" data-ride="carousel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Indicators -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ol class="carousel-indicators">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ol>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Wrapper for slides -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="http://johnuberbacher.com/projects/codepen/slideshow-1.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-caption">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Slideshow 1</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item active">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="http://johnuberbacher.com/projects/codepen/slideshow-2.jpg" alt="Awesome Image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-caption">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Slideshow 2</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="http://johnuberbacher.com/projects/codepen/slideshow-3.jpg" alt="Awesome Image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-caption">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Slideshow 3</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Controls -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="cursor-icons">keyboard_arrow_left</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="cursor-icons">keyboard_arrow_right</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!-- End Carousel Card -->&nbsp; </div>

Answer 2

您可以使用 JS 或 CSS：document.getElementById("nocursor").style.cursor = "default".nocursor {cursor: default}<a href="#" id="nocursor" class="nocursor">Hover Over me</a>