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

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 {

  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>

Answer 2

您可以使用 JS 或 CSS：

document.getElementById("nocursor").style.cursor = "default"

.nocursor {

cursor: default

}

<a href="#" id="nocursor" class="nocursor">Hover Over me</a>