Question

我有一个包含四个点的侧面导航。将鼠标悬停在其中一个点上时，每个点旁边都会显示文本。如果在点之间移动鼠标，则文本会在视图中闪烁。有没有办法添加某种功能，所以如果用户没有在1.5秒内悬停其中一个点，那么文本将隐藏？

代码段：

function setNav(line,text) {
      $(text).hide();
      $(line).hover(
      function () {
        $(text).fadeIn(250);
      },
      function () {
        $(text).fadeOut(250);
      })
    }

    setNav(".lineDot", ".lineText");

.dot {
      color: #000;
      display: inline;
      transition: all 0.3s ease;
    }

    .dot:hover {
      transform-origin: right;
      transform: scale(1.5);
    }

    .dots {
      position: fixed;
      right: 15px;
      text-align: right;
    }

    .lineDot {
      text-decoration: none;
      color: #000;
      display: inline;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div class="dots">
    <a href="" class="lineDot" id="d1"><p id="d1text" class="lineText" style="display: inline;">Home </p><i class="dot fas fa-circle"></i></a>
    <br>
    <br>
    <a href="" class="lineDot" id="d2"><p id="d2text" class="lineText" style="display: inline;">About </p><i class="dot fas fa-circle"></i></a>
    <br>
    <br>
    <a href="" class="lineDot" id="d3"><p id="d3text" class="lineText" style="display: inline;">Projects </p><i class="dot fas fa-circle"></i></a>
    <br>
    <br>
    <a href="" class="lineDot" id="d4"><p id="d4text" class="lineText" style="display: inline;">Contact </p><i class="dot fas fa-circle"></i></a>
    <br>
  </div>

提前感谢您的时间和帮助。

Answer 1

如何更改此行代码？

setNav(".lineDot", ".lineText");

另一个吗？

setNav(".dots", ".lineText");

这不会使点点击，因为它是包含一次显示的文本的元素。

Answer 2

如果您不希望文本在链接之间移动时消失，则应该监听父元素mouseenter和mouseleave或使用hover，这是一种速记我更喜欢使用它，因为它更具可读性。

除此之外，每次调用函数时都会绑定悬停，这不是一个好主意，而是将它移到函数之外。

查看以上

的修改版本

＆＃13;

var text = '.lineText';

$(document).ready(function() {
  $(text).hide();
  $('.dots').on({
    mouseenter: function() {
      $('.lineText').fadeIn(250);
    },
    mouseleave: function() {
      $('.lineText').fadeOut(250);
    }
  });
});

＆＃13;

.dot {
  color: #000;
  display: inline;
  transition: all 0.3s ease;
}

.dot:hover {
  transform-origin: right;
  transform: scale(1.5);
}

.dots {
  position: fixed;
  right: 15px;
  text-align: right;
}

.lineDot {
  text-decoration: none;
  color: #000;
  display: inline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<div class="dots">
  <a href="" class="lineDot" id="d1">
    <p id="d1text" class="lineText" style="display: inline;">Home </p><i class="dot fas fa-circle"></i></a>
  <br>
  <br>
  <a href="" class="lineDot" id="d2">
    <p id="d2text" class="lineText" style="display: inline;">About </p><i class="dot fas fa-circle"></i></a>
  <br>
  <br>
  <a href="" class="lineDot" id="d3">
    <p id="d3text" class="lineText" style="display: inline;">Projects </p><i class="dot fas fa-circle"></i></a>
  <br>
  <br>
  <a href="" class="lineDot" id="d4">
    <p id="d4text" class="lineText" style="display: inline;">Contact </p><i class="dot fas fa-circle"></i></a>
  <br>
</div>

＆＃13;

jQuery - 如何使出现/消失文本的侧面导航更顺畅？

2 个答案: